概念
響應(yīng)式網(wǎng)頁設(shè)計(jì)最初是由 Ethan Marcotte 提出的一個(gè)概念：為什么一定要為每個(gè)用戶群各自打造一套設(shè)計(jì)和開發(fā)方案羊娃？Web設(shè)計(jì)應(yīng)該做到根據(jù)不同設(shè)備環(huán)境自動(dòng)響應(yīng)及調(diào)整园细。當(dāng)然響應(yīng)式Web設(shè)計(jì)不僅僅是關(guān)于屏幕分辨率自適應(yīng)以及自動(dòng)縮放的圖片等等，它更像是一種對(duì)于設(shè)計(jì)的全新思維模式；我們應(yīng)當(dāng)向下兼容层宫、移動(dòng)優(yōu)先。

背景

1. PC互聯(lián)網(wǎng)加速向移動(dòng)端遷移：2012年12月底我國網(wǎng)民規(guī)模達(dá)到5.64億其监，互聯(lián)網(wǎng)普及率為42.1%萌腿，手機(jī)用戶占網(wǎng)民總數(shù)的74.5%。預(yù)計(jì)到2015年抖苦，移動(dòng)互聯(lián)網(wǎng)的數(shù)據(jù)流量將超越PC端的流量毁菱。
2. 移動(dòng)端入口：當(dāng)用戶希望通過手機(jī)來完成PC頁的操作時(shí)，常見的是商家的運(yùn)營微博锌历，期文案足夠吸引用戶點(diǎn)擊鏈接參加活動(dòng)贮庞，如果該活動(dòng)頁沒做響應(yīng)式處理：頁面體積大、請(qǐng)求多究西、體驗(yàn)差窗慎、兼容性差，層層阻礙最終導(dǎo)致用戶放棄參加怔揩。
3. 優(yōu)勢 開發(fā)成本低捉邢，門檻低
   Native APP：Objective-C or Java – 學(xué)習(xí)成本高
   Hybrid APP： 外殼+Web APP脯丝，需安裝商膊。
   響應(yīng)式Web APP：HTML5+JS+CSS – 門檻低，極易上手宠进，迭代快

跨平臺(tái)和終端且不需要分配子域
雖然可通過監(jiān)測用戶UA來判斷用戶終端后做跳轉(zhuǎn)晕拆，但它還是分配了多個(gè)域，而響應(yīng)式無需監(jiān)測用戶UA沒有域的切換材蹬，只需根據(jù)終端類型來適配不同的功能模塊與表現(xiàn)樣式实幕，它是跨平臺(tái)和終端的，1頁面適配多終端堤器。

1. PC – http://qzone.com
2. Mobile – http://m.qzone.com
3. 響應(yīng)式：PC & Mobile – http://qzone.com 無需跳轉(zhuǎn)

本地存儲(chǔ)
Web App可以利用本地存儲(chǔ)的特性將重要和重復(fù)的數(shù)據(jù)保存在本地昆庇，避免頁面的重復(fù)刷新，減少重要信息在傳輸過程中被泄露闸溃，增量傳輸修改內(nèi)容整吆。
無需安裝成本，迭代更新容易

images

更靈活辉川、更方便的APP使用及安裝方式將成為HTML5在移動(dòng)平臺(tái)上大放異彩的保障之一

實(shí)施
首先我們應(yīng)該遵循移動(dòng)優(yōu)先原則表蝙，交互&設(shè)計(jì)應(yīng)以移動(dòng)端為主，PC則作為移動(dòng)端的一個(gè)擴(kuò)展乓旗；一個(gè)頁面需要兼容不同終端府蛇，那么有兩個(gè)關(guān)鍵點(diǎn)是我們需要去做到響應(yīng)式的：
響應(yīng)式布局
響應(yīng)式內(nèi)容（圖片、多媒體）

響應(yīng)式布局
如我們需要兼容不同屏幕分辨率屿愚、清晰度以及屏幕定向方式豎屏(portrait)汇跨、橫屏(landscape)务荆，怎樣才能做到讓一種設(shè)計(jì)方案滿足所有情況？
那么我們的布局應(yīng)該是一種彈性的柵格布局穷遂，不同尺寸下彈性適應(yīng)蛹含，如以下頁面中各模塊在不同尺寸下的位置：

響應(yīng)式布局

1. 使用 viewport meta 標(biāo)簽在手機(jī)瀏覽器上控制布局
   <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
2. 通過快捷方式打開時(shí)全屏顯示
   <meta name="apple-mobile-web-app-capable" content="yes" />
3. 隱藏狀態(tài)欄
   <meta name="apple-mobile-web-app-status-bar-style" content="blank" />
4. iPhone會(huì)將看起來像電話號(hào)碼的數(shù)字添加電話連接塞颁，應(yīng)當(dāng)關(guān)閉
   <meta name="format-detection" content="telephone=no" />

使用 Media Queries 適配對(duì)應(yīng)樣式

常用于布局的CSS Media Queries有以下幾種

1. 設(shè)備類型(media type):

2. all

3. 所有設(shè)備screen

4. 電腦顯示器print

5. 打印用紙或打印預(yù)覽視圖handheld

6. 便攜設(shè)備tv

7. 電視機(jī)類型的設(shè)備speech

8. 語意和音頻盒成器braille

9. 盲人用點(diǎn)字法觸覺回饋設(shè)備embossed

10. 盲文打印機(jī)projection

11. 各種投影設(shè)備tty

12. 使用固定密度字母柵格的媒介浦箱，比如電傳打字機(jī)和終端

13. 設(shè)備特性(media feature):

14. width

15. 瀏覽器寬度height

16. 瀏覽器高度device-width

17. 設(shè)備屏幕分辨率的寬度值device-height

18. 設(shè)備屏幕分辨率的高度值orientation

19. 瀏覽器窗口的方向縱向還是橫向，當(dāng)窗口的高度值大于等于寬度時(shí)該特性值為portrait祠锣，否則為landscapeaspect-ratio

20. 比例值酷窥，瀏覽器的縱橫比device-aspect-ratio

21. 比例值，屏幕的縱橫比
    例子：

     /* for 240 px width screen */
     @media only screen and (max-device-width:240px){
       selector{ ... }
     }
     /* for 320px width screen */
     @media only screen and (min-device-width:241px) and (max-device-width:320px){
        selector{ ... }
     }
     /* for 480 px width screen */
     @media only screen (min-device-width:321px)and (max-device-width:480px){
             selector{ ... }
     }
    

適用于布局的 Media Queries 這里不做詳述伴网，可通過官方文檔進(jìn)一步了解那么對(duì)于表格(table)的響應(yīng)式處理該是怎樣的呢蓬推？我們該如何突破Table的局限性呢？接下來我們來了解以下的幾種針對(duì)表格響應(yīng)式處理的方法：
隱藏不重要數(shù)據(jù)列

Paste_Image.png

Paste_Image.png

• 實(shí)現(xiàn)方法：
  @media only screen and (max-width: 800px) {
  table td:nth-child(2),
  table th:nth-child(2) {display: none;}
  }

   @media only screen and (max-width: 640px) {
     table td:nth-child(4),
     table th:nth-child(4),
     table td:nth-child(7),
     table th:nth-child(7),
     table td:nth-child(8),
     th:nth-child(8){display: none;}
   }
  

以用戶角度思考澡腾，每個(gè)人對(duì)數(shù)據(jù)的認(rèn)知不同沸伏，或許你隱藏的數(shù)據(jù)對(duì)于他卻是很重要的。所以這種方法不推薦动分。

多列橫向變2列縱向

Paste_Image.png

實(shí)現(xiàn)方法：

`<thead>`定位隱藏毅糟，`<td>`變塊元素，并綁定對(duì)應(yīng)`<th>`列名澜公，然后用偽元素的`content:attr(data-th)`實(shí)現(xiàn)`<th>`

Paste_Image.png

Paste_Image.png

Paste_Image.png

處理后

• 實(shí)現(xiàn)原理：

  thead {float:left;}
  tbody {display:block;width:auto;overflow-x:auto;}
  

柵格框架推薦
Responsive Grid System
Fluid 960 Grid
Simple Grid

響應(yīng)式圖片

Paste_Image.png

帶寬是手機(jī)終端的硬傷，如果我們只是頁面布局做了響應(yīng)式處理坟乾，在我們用手機(jī)訪問時(shí)迹辐，請(qǐng)求的圖片還是PC上的大圖；文件體積大甚侣，消耗流量多明吩，請(qǐng)求延時(shí)長，因此導(dǎo)致的問題也是不可估量的殷费。那么我們就得把圖片也處理成響應(yīng)式的根據(jù)終端類型尺寸分辨率來適配出合理的圖形印荔。

處理原理：

瀏覽器獲取用戶終端的屏幕尺寸、分辨率邏輯處理后輸出適應(yīng)的圖片宗兼，如屏幕分辨率320*480躏鱼，那么我們匹配給它的是寬度應(yīng)小于320px的圖片。如果終端屏幕的DPI(device pixels)DPI詳解
值很高殷绍，也就是高清屏染苛，那么我們就得輸出2倍分辨率的圖形(寬:640px)；以保證在高清屏下圖形的清晰度。各種移動(dòng)終端的屏幕參數(shù)可通過http://screensiz.es/phone查詢茶行。

解決方案：

其實(shí)W3C已經(jīng)有一個(gè)用于響應(yīng)式圖形的草案：新定義標(biāo)簽<picture>躯概，因?yàn)樗€只是草案，目前還沒有支持的瀏覽器畔师，期待在不久的未來我們能用上娶靡。雖然目前不支持，但我們還是來了解下看锉，為之后的內(nèi)容做個(gè)鋪墊姿锭。

<picture>是一個(gè)圖形element，內(nèi)容由多個(gè)源圖組成伯铣，并由CSS Media Queries來適配出合理圖形呻此，代碼規(guī)范如下：

<picture width="500" height="500">
   <source media="(min-width: 640px)" srcset="large-1.jpg 1x, large-2.jpg 2x">
   <source media="(min-width: 320px)" srcset="med-1.jpg 1x, med-2.jpg 2x">
   <source srcset="small-1.jpg 1x, small-2.jpg 2x">
   <img src="small-1.jpg" alt="">
   <p>Accessible text</p>
   <!-- Fallback content-->
   <noscript>
      <img src="external/imgs/small.jpg" alt="Team photo">
   </noscript>
</picture>

source
: 一個(gè)圖片源；media
: 媒體查詢腔寡，用于適配屏幕尺寸焚鲜；srcset
: 圖片鏈接，1x適應(yīng)普通屏放前，2x適應(yīng)高清屏忿磅；<noscript/>
: 當(dāng)瀏覽器不支持腳本時(shí)的一個(gè)替代方案；<img/>
: 初始圖片凭语；另外還有一個(gè)無障礙文本葱她，類似<img/>的alt屬性。
<picture>目前還不支持叽粹，但它的原理我們是可借鑒的览效，所以就誕生了一個(gè)用于圖片響應(yīng)式處理的類庫

Picturefill

<span data-picture data-alt="圖片描述文本">
    <span data-src="small.jpg"></span>
    <span data-src="medium.jpg"     data-media="(min-width: 400px)"></span>
    <span data-src="large.jpg"      data-media="(min-width: 800px)"></span>
    <span data-src="extralarge.jpg" data-media="(min-width: 1000px)"></span>
    <!-- 瀏覽器不支持JS時(shí)的備用方案. -->
    <noscript>
        <img src="external/imgs/small.jpg" alt="圖片描述文本">
    </noscript>
</span>

其原理就是JS獲取Source的源以及CSS Media Queries規(guī)則，輸出適應(yīng)圖片虫几， 邏輯細(xì)節(jié)這里不再解析，感興趣的可查看其JS代碼挽拔，邏輯不是很復(fù)雜辆脸，也可以自己封裝一個(gè)類庫，以適用于自身產(chǎn)品螃诅，例如圖片加載失敗的替代方案啡氢。

當(dāng)然，在未來的 CSS Image Level 4 中已經(jīng)實(shí)現(xiàn)了響應(yīng)式圖片的原生語法：image-set

<image-set> = image-set([ <image-set-decl>, ]* [ <image-set-decl> | <color>])
<image-set-decl> = [ <image> | <string> ] <resolution>

那么我們的響應(yīng)式圖片可以這樣重寫了

background-image:url(default.jpg);  /* 普通幕 */
background-image: -webkit-image-set(url(medium.jpg) 1x, url(large.jpg) 2x);  /* Retina高清屏 */

注：Webkit 目前只實(shí)現(xiàn)了 url() 形式的取值术裸，且dppx值取負(fù)值[-2x]貌似也是合法的倘是。

當(dāng)然除此之外，還有其他的響應(yīng)式處理袭艺，如服務(wù)端user-agent嗅探

高分辨率(DPI)下的響應(yīng)式處理

1. SVG：優(yōu)點(diǎn)可承載色彩豐富搀崭、設(shè)計(jì)復(fù)雜圖形，且渲染不會(huì)出現(xiàn)邊緣不順滑；缺點(diǎn)是IE的支持不完美瘤睹，在我大中華這是硬傷升敲。

2. Icon fonts：支持多瀏覽器，圖形顏色大小的修改成本低轰传，易于維護(hù)驴党；圖形表現(xiàn)單一，不支持色彩豐富且復(fù)雜的圖形获茬，IE6渲染有毛邊港庄。

3. -webkit-image-set:只支持單個(gè)圖形的適配，不利于圖形合并恕曲，兼容不完美（Safari 6+, Chrome 21+）

JS檢測：var retina = window.devicePixelRatio > 1;

CSS Media Query:

@media (-webkit-min-device-pixel-ratio: 2), /* Webkit-based browsers */
       (min--moz-device-pixel-ratio: 2),    /* Older Firefox browsers (prior to Firefox 16) */
       (min-resolution: 2dppx),             /* The standard way */
       (min-resolution: 192dpi)             /* dppx fallback */

高分辨率下的1px border

Paste_Image.png

在Photoshop中稿存，如果需要看似0.5px的邊框笨篷，常見的方法就是對(duì)1px邊框加上陰影模糊1px。同理瓣履，我們在retina屏下需要做到真實(shí)的1px邊框率翅，可利用box-shadow屬性模擬。

@media only screen and (-webkit-min-device-pixel-ratio:1.5),
       only screen and (min-device-pixel-ratio:1.5) {

  button {
    border:none;
    padding:0 16px;
    box-shadow: inset 0 0 1px #000,
                inset 0 1px 0 #75c2f8,
                0 1px 1px -1px rgba(0, 0, 0, .5);
    }
}

留給我們的思考

• 響應(yīng)式不只是技術(shù)的實(shí)現(xiàn)袖迎，它更像是一種對(duì)于設(shè)計(jì)的全新思維模式
• 瀏覽的體驗(yàn)短期內(nèi)還無法超越原生應(yīng)用
• 左手操作習(xí)慣的交互
• Webapp的消息推送
• 調(diào)用本地文件系統(tǒng)的能力弱
• 響應(yīng)式圖片的解決方案
• 對(duì)PC事件的兼容
• WebAPP頁面體積的響應(yīng)式適配
• 代碼實(shí)現(xiàn)和內(nèi)容可維護(hù)性之間的權(quán)衡
• 控制設(shè)計(jì)開發(fā)成本

實(shí)用技巧

• 點(diǎn)擊區(qū)域不限于元素的視覺區(qū)域冕臭，便于用戶點(diǎn)擊。同時(shí)排版不受限制燕锥，可以達(dá)到原生App的視覺效果辜贵。
  氣泡框可以減少頁面跳轉(zhuǎn)，適合消息提醒等微任務(wù)的處理归形。

• 信息架構(gòu)上越來越接近原生App托慨，有利于扁平化層級(jí)關(guān)系和減少界面跳轉(zhuǎn)等設(shè)計(jì)元素將得到更多的應(yīng)用。

• 識(shí)別更多的手勢操作暇榴，如下拉刷新和右滑存檔等平移手勢厚棵。操作不必全部呈現(xiàn)在界面中，和平臺(tái)操作保證一致蔼紧。

• 調(diào)用系統(tǒng)硬件婆硬，如重力感應(yīng)等傳感器、多媒體設(shè)備奸例，不過在手機(jī)端還鮮有應(yīng)用案例彬犯，離大規(guī)模應(yīng)用還有一定的距離。