響應式設計介紹
2013年，智能機上網時間已經超過PC機了，并且這種趨勢是不可逆的，設計移動設備將成為Web開發人員的首要任務。針對移動用戶，一種方案是開 發Native App，如分別給IOS和Anroid開發應用，但是這種方案成本非常高，更新比較困難；另外一種是建立一個專門的移動網站，通常是m.*.com，例如 m.qian.com，這種方式需要維護2套代碼，成本也比較高；還有一種方案就是響應式設計，好處是一套代碼打天下，維護相對來說方便多了，成本較低， 開發速度較快。在文章的最后會有它缺點的討論。
什么是響應式設計
維基百科對響應式設計是這么介紹的：
響應式Web設計是網站制作使用的一個疊層樣式表( CSS3media queries)，結合流體網格適應各種布局，還可靈活使用圖像。用戶可跨越不同設備和瀏覽器的限制，訪問相同內容，布局也利于閱讀和瀏覽，只需細微的調整、平移或滾動。
</blockquote>移動優先
- 手機在爆炸式增長
移動設備的數量和質量都在急速增長，隨著數量的激增，越來越多的人們開始只使用移動設備來訪問互聯網。
- 手機迫使你專注
優先為手機設計可以迫使你專注于弄清楚哪些內容是最重要的，因為這些設備大都只有一個很小的屏幕，這就意味著你能往里面填充內容的空間很有限。這樣你就只能把那些對于用戶來說最為重要的內容放在首頁。
- 手機延伸了你的能力
現在的智能機功能越來越強，例如我的Nexus 4是四核，2G內存，大有超越PC機的節奏。除此之外，智能機還有好多PC機所沒有的功能，如可以調用地理定位功能來優化體驗，可以根據人們持握它們的方 向來改變布局，并且好多設備擁有多點觸摸接口。這些功能極大的豐富了人們的用戶體驗。
此外移動設備上也開始加裝越來越多的傳感器，雖然目前還有傳感器是不能從瀏覽器中訪問到的，但是你要放眼未來，你可以考慮一下如何利用這些傳感器來創建出更好的體驗。
</li> </ul>media type & media query
media type(媒體類型)是css 2中的一個非常有用的屬性，通過media type我們可以對不同的設備指定特定的樣式，從而實現更豐富的界面。media query(媒體查詢)是對media type的一種增強，是CSS 3的重要內容之一。隨著移動互聯網的發展，media query開始得到大家的重視，現在它是響應式開發的基礎。
media type
讓我們先了解一下media type，其實這個大家會比較熟悉一點，我們通常會用到的media type會是all 和screen，然后是print，一些網站會專門通過print類型為頁面的打印格式提供更友好的界面。其實，media type有很多種：
值 描述 </tr>screen 針對不分頁的計算機屏幕。 </tr>tty 針對使用等寬字符網格的媒介（比如打字機、終端或其他具有有限顯示能力的設備）。 </tr>tv 針對 TV 類型的設備。 </tr>projection 針對投影機。 </tr>handheld 針對手持設備。 </tr>針對打印預覽模式的頁面和文檔。 </tr>braille 針對盲人用點字法觸覺反饋裝置。 </tr>aural 針對語音合成。 </tr>all 針對所有設備或裝置。 </tr> </tbody> </table>Media Query
Media Query是CSS3 對Media Type的增強版，其實可以將Media Query看成Media Type(判斷條件)+CSS(符合條件的樣式規則)，常用的特性w3c共列出來13種。具體的可以參閱：Media features 。
屬性 值 Min/Max 描述 </tr> </thead>color 整數 yes 每種色彩的字節數 </tr>color-index 整數 yes 色彩表中的色彩數 </tr>device-aspect-ratio 整數/整數 yes 寬高比例 </tr>device-height length yes 設備屏幕的輸出高度 </tr>device-width length yes 設備屏幕的輸出寬度 </tr>grid 整數 no 是否是基于格柵的設備 </tr>height length yes 渲染界面的高度 </tr>monochrome 整數 yes 單色幀緩沖器中每像素字節 </tr>resolution 分辨率(“dpi/dpcm”) yes 分辨率 </tr>scan Progressive interlaced no tv媒體類型的掃描方式 </tr>width length yes 渲染界面的寬度 </tr>orientation Portrait/landscape no 橫屏或豎屏 </tr> </tbody> </table>更多Media Query請參考：CSS3 Media Queries
Viewport
當你用iPhone訪問一個沒有面向移動設備優化過的網站時(最好選取960px寬度的網站)，你會發現iPhone上面剛好可以把整個頁面顯示出 來，但是頁面被縮小了非常多，字體非常小。這其實是Sarari默認把自己當成980px寬度來處理的，而所有iPhone(豎屏)的真實寬度為 320px，事實上幾乎所有的移動設備都有類似的情況，iPhone的請參考iPhone 5 Display Size and Web Design Tips。這就牽扯到Viewport的概念了。
Viewport是瀏覽器的可視區域，也是瀏覽器的寬度，在PC上面問題比較簡單，寬度是多少就多少，但是在移動設備上，瀏覽器嘗試去把整個頁面都 顯示出來，所以就會Viewport值不準確的情況，例如上面提到的Safari從iPhone那里獲取到寬度是980px(瀏覽器只能從系統那里獲取寬 度)，所以我們要做第一件事就是要瀏覽器用真實的寬度去解析頁面，代碼如下：
<meta name="viewport" content="width=device-width, initial-scale=1.0">"width=device-width"表示瀏覽器用它自己真實的寬度，如iPhone上面就是320px，initial-scale=1.0表示默認不進行縮放。關于Viewport更多請參考：Using the viewport meta tag to control layout on mobile browsers
補充一下：設備像素不等于CSS像素，例如用戶放大頁面300%，CSS像素也跟著放大300%，但設備像素肯定不會有變化。很多設備為了保證良好 瀏覽效果，通常會告訴瀏覽器一個假的分辨率，例如iPhone5s的設備分辨率是640x1136，但是卻告訴瀏覽器它的分辨率是320x568(網站要 加width=device-width，否則是980寬度)，否則真的以640x1136在那點屏幕上進行瀏覽頁面肯定要近視了。
確定斷點
傳統的確定斷點的方案是使用一些固定的寬度進行劃分，如320px(iPhone)，768px(iPad)，960px或1024px(傳統PC 瀏覽器)，這種方案的好處是很好照顧到了當前主流的設備，但是技術發展實現是太快了，各種不同分辨率的設備層出不窮，很難保證未來能很好的支持各種設備。
另外一種確定斷點的方法是根據內容進行設置斷點以及設置多少個斷點，這樣有助于將布局和分辨率進行解耦，同時可以盡可能多的支持各種分辨率的設備。一種具體做法是將瀏覽器的寬度縮小到300px，然后逐步拉大瀏覽器的寬度，觀察頁面的變化，用來確定在何處設置斷點。
設計原則 - 從手機端向上設計
傳統網頁設計建議使用最新的功能，然后支持優雅降級，這么做其實使廣大低端設備擁有較差的用戶體驗。而在做響應式設計時提倡從移動端開始設計，先創 建核心體驗，核心體驗要盡量簡單、合理，同時又能在盡可能多的設備上使用。在此基礎上，逐漸為屏幕更大、功能更強的設備添加更多的功能。
圖片處理
不同分辨率的設備使用不同尺寸的圖片可以節約帶寬，但是千萬不要使用display:none來隱藏不想要的圖片(比如隱藏大尺寸的圖片而只顯示小圖片)，因為隱藏后的圖片瀏覽器會加載隱藏的圖片的。
背景圖片
背景圖片處理起來比較簡單，使用Media Query來根據設備分辨率載入合適的圖片就可以了。請看下面例子：
@media only screen and (max-width: 320px) { .header { background: url(header_320.png) no-repeat; } } @media only screen and (max-width: 640px) { .header { background: url(header_640.png) no-repeat; } } @media only screen and (min-width: 640px) { .header { background: url(header_normal.png) no-repeat; } }IMG標簽內嵌圖片
我們假定在小屏幕上不顯示圖片，而在大屏幕上顯示圖片，所以我們不能直接在HTML里面插入IMG標簽，我們可以將圖片URL保存在它的父元素的 data-src屬性上，然后用JavaScript根據分辨率判斷是否需要顯示圖片，如果需要，則用JavaScript遍歷將所有圖片插入到HTML 中。
<header data-src="images/logo.png"></header>Retina屏幕優化
Retina屏幕顯示圖片時，由于像素比例（devicePixeRatio）是2，這個時候圖片也將放大兩倍，此時就造成了圖片在設置中顯示時被 拉伸，呈現出來的時候就模糊不清，所以必須給Retina屏幕準備一例高清圖片。做法是先默認使用普通圖片，同時用data-src屬性來保存高清圖片的 URL，然后用JavaScript判斷是否需要替換成高清圖片。
<header><img src="logo.jpg" alt="" data-src="logo@2x.jpg" /></header>JavaScript可以根據window.devicePixelRatio值來判斷設備的像素比例，Retina屏的像素比例是2，其實還有好 像設備的像素比例是介于1~2之間的。CSS可以在Media Query中使用-webkit-min-device-pixel-ratio屬性。
關于Retina屏幕優化的更多知識可以參考：移動Web——CSS為Retina屏幕替換圖片以及Retina 屏幕下，網頁圖片的顯示兼容
針對移動設備的更多優化
移動設備的特點是CPU慢，內存少，網速慢，功能多。所以我們應該針對移動設備的特點盡量避開它的缺點，發揮它的優點。
性能優化
- 減少網頁的大小
可以使用更小的圖片，使用輕量級的JS庫，如使用ZeptoJS或XUIJS來代替jQuery，次要的內容可以不載入。對JS和CSS文件進行壓縮，同時開啟服務器的壓縮功能。
- 減少HTTP請求數
可以使用文件合并，將所有的JS和CSS各自合并成一個文件，同時使用CSS Spirits技術將小圖標進行合并。
- 延遲加載圖片
使用圖片延遲加載技術，頁面只加載瀏覽器可視區域內的圖片。
- 使用HTML5技術
移動設備上的瀏覽器一般對HTML5支持得比較好，所以可以考慮使用HTML5的一些功能來增強移動設備的用戶體驗。
- 語音輸入
- 觸摸功能
- 手勢
- GPS定位
- 智能輸入框，如Email, URL, Telephone，移動設備會為它們顯示不同的鍵盤。
</ul> </li>- 根據帶寬顯示不同的內容
</ul>我們可以從navigator.connection中獲得設備的網絡類型，比如2G, 3G等，然后根據不同的帶寬顯示不同的圖片，比如低帶寬的設備顯示低分辨率的圖片及保證它們有較快的響應速度。關于navigator.connection可以參考Network Information API
更多挑戰
這幾年各種新的設備層出不窮，如可穿戴設備的流行逐漸興起，如智能手表，智能眼鏡等，這些設備的特點是屏幕非常小。另外以智能電視為代表的超大屏幕的設備也越來越流行起來。所有這些都給Web設計開發人員帶來巨大的挑戰，當然將來會出現更多的各種神奇的設備。
調試工具
- Adobe Edge Reflow
Adobe Edge Reflow可以用于響應式設計的可視化創作，提高通過HTML5和CSS3技術在不同設備上所進行的網頁開發效率,，Reflow的主要功能是通過在設 計的過程中將所有的“斷點”“模塊”進行可視化的展示，讓開發者可以在工具中一邊進行間距的調試，一邊測試展示效果。
- Chrome 開發者工具
Chrome瀏覽器可以模擬各種設備的User Agent，Device metrics，Device Orientation，Touch Event，Override Geolocationt等，可以很方便的在Chrome上面模擬手機上面的各種行為與效果，方便的進行開發測試。可以按F12，然后點擊右下角的 Setting，接著點擊Overrides就可以進行設置。
- Responsivator
這是一個在線測試響應式設計頁面的工具，它提供了很多不同的尺寸屏幕的展示效果，你只需要提供一個url，就可以看到你的網站在不同的屏幕下的顯示效果。
- Responsive Test
</ul>這也是一個在線的響應式測試工具，和Responsivator不同的地方在于，它只有一個窗口，但是你可以任意的修改它的尺寸，也可以對屏幕進行旋轉，它同時自帶了一些常用設備的模板，方便測試。
IE支持，respond.js, ie.css
IE9+才開始支持Media Query，要想低版本的IE支持Media Query，需要借助JS的支持，respond.js和css3-mediaqueries-js。
respond.js壓縮后1k，只實現了media query中最常用的min-width max-width的兼容，所以性能非常好，而css3-mediaqueries-js基本實現了所有css3規范中的media query特性的兼容，所以導致壓縮有16k，測試反饋其性能遠低于respond.js。其實大部分情況下只會用到max-width和min-width，因此這時Respondjs無疑是首選。詳細請參考media query ie8- 兼容實現總結
缺點
上面說了好多響應式設計的優點，但是響應式設計不是銀彈，下面說說它不適合的場合及缺點。
- 加載需要一定的時間
雖然，它不是一個大問題，在響應式設計中，需要下載一些看起來并不必要的HTML/CSS。除此之外，圖片并沒有根據設備調整到合適大小，而這正是導致加載時間加倍的原因。
- 優化搜索引擎
對于響應式Web設計，為搜索引擎確定關鍵字不是一件容易的事。因為相比一般桌面用戶，移動用戶多采用不同的關鍵字，修改標題及其他事項都比較困難。
- 時間花費
開發響應式網站是一項耗時的工作。如果你計劃把一個現有網站轉化成響應式網站，可能耗時更多。如果你想要一個響應式網站，最好從草圖開始重新設計。
- 布局難以控制
</ul>響應式Web設計的布局主要是液態的，這也正是設計者對設計樣式不好控制的原因。而且眼下正是設計者提前展示各種“復制品”的時候。設計者試圖針對移動和桌面布局分別顯示線框和設計原型。只有等到這兩種布局均得到提高后，響應式Web設計策略才能真正實現。
響應式設計的替代方案
- 加載需要一定的時間
雖然，它不是一個大問題，在響應式設計中，需要下載一些看起來并不必要的HTML/CSS。除此之外，圖片并沒有根據設備調整到合適大小，而這正是導致加載時間加倍的原因。
- 優化搜索引擎
對于響應式Web設計，為搜索引擎確定關鍵字不是一件容易的事。因為相比一般桌面用戶，移動用戶多采用不同的關鍵字，修改標題及其他事項都比較困難。
- 時間花費
開發響應式網站是一項耗時的工作。如果你計劃把一個現有網站轉化成響應式網站，可能耗時更多。如果你想要一個響應式網站，最好從草圖開始重新設計。
- 布局難以控制
</ul>響應式Web設計的布局主要是液態的，這也正是設計者對設計樣式不好控制的原因。而且眼下正是設計者提前展示各種“復制品”的時候。設計者試圖針對移動和桌面布局分別顯示線框和設計原型。只有等到這兩種布局均得到提高后，響應式Web設計策略才能真正實現。
CSS框架
- Foundation
- Bootstrap
</ul>參考文獻
- CSS3 Media Queries
- media query ie8- 兼容實現總結
- iPhone 5 Display Size and Web Design Tips
- Retina 屏幕下，網頁圖片的顯示兼容
- 移動Web——CSS為Retina屏幕替換圖片
- Network Information API
- 走向視網膜（Retina）的Web時代
- 響應式Web設計：最佳指南
</ul> 來自: BorisHuai前端修煉 > 響應式設計介紹本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！sesese色