詳解響應式網(wǎng)頁(yè)設計與應用發(fā)布者：本站     時(shí)間：2021-12-15 11:12:37

每個(gè)射擊濕都想自己的網(wǎng)站可以在任何設備上體驗都很牛，神馬iPhone、ipad、黑莓、kindle……無(wú)所不能啊~ 苦逼的是這些東東的系統不一樣，分辨率也不一樣??；電腦的屏幕越來(lái)越大，但是還有一半的用戶(hù)還是用的17寸CRT；手機、pad層出不窮，沒(méi)有個(gè)統一標 準，我們又不想失去任何一個(gè)用戶(hù)，這可苦了我這些設計師了，需要付出更多的心血來(lái)獲得更好的體驗，誰(shuí)讓我們是射擊濕呢。

電子產(chǎn)品更新?lián)Q代節奏都快成馬了，跟都跟不上。對于網(wǎng)站來(lái)說(shuō)根本不可能為每種設備都開(kāi)發(fā)個(gè)版本出來(lái)，結果就是贏(yíng)得魚(yú)，卻失去了熊掌，不過(guò)我們還是有辦法的。

響應式Web設計(Responsive Web design)，理念是設計和開(kāi)發(fā)應根據屏幕的大小、平臺的用戶(hù)的行為和環(huán)境基礎上自動(dòng)調整；他應該有一個(gè)靈活的網(wǎng)格和布局，圖像和CSS能夠智能的組合 使用。比如說(shuō)用戶(hù)從電腦切換到ipad，網(wǎng)站能夠自動(dòng)切換以適應分辨率，圖像大小和腳本。換句話(huà)說(shuō)，網(wǎng)站應該具備根據用戶(hù)的使用環(huán)境來(lái)自動(dòng)調整，這可以減 少不必要的重復設計。

響應式Web設計的概念
Ethan Marcotte曾經(jīng)在A(yíng) List Apart發(fā)表過(guò)一篇文章“Responsive Web Design”，文中援引了響應式建筑設計的概念：

所謂響應式建筑設計就是設計師嘗試建造一種使用一些傳感器檢測周?chē)h(huán)境，比如說(shuō)溫度、濕度、光線(xiàn)等等自動(dòng)進(jìn)行調整的房子?，F在我們把這個(gè)思路延伸到 WEB設計領(lǐng)域。我們可以想，為啥我們要為每個(gè)用戶(hù)群各自打造一套設計方案呢？我們太笨了，有沒(méi)有更智能的做法？和響應式建筑設計一樣，web設計也應該 做到智能調整。

顯然web設計不能使用傳感器，這就要更多的抽象思維。好在現在一些概念已經(jīng)得到實(shí)踐了，比如液態(tài)布局、 幫助頁(yè)面重新格式化的media queries和腳本等。但是響應式Web設計不僅僅是關(guān)于屏幕分辨率自適應以及自動(dòng)縮放的圖片等等，它更像是一種對于設計的全新思維模式。

調整分辨率
不同的設備都有各自的屏幕分辨率、清晰度以及屏幕定向方式，不斷被研發(fā)的各種新設備也將出現新的屏幕尺寸規格。有些設備 基于橫屏 (portrait)，有些是豎屏(landscape)，甚至還有正方形；對于日益流行的iPhone、iPad及其他一些智能手機、平板電腦，用戶(hù)還 可以通過(guò)轉動(dòng)設備來(lái)任意切換屏幕的定向方式。怎樣才能做到讓一種設計方案滿(mǎn)足所有情況？

詳解響應式<a href=/photoshop/web/ target=_blank class=infotextkey>網(wǎng)頁(yè)設計</a>與應用,PS教程,

 要想做到同時(shí)兼容橫、豎屏(用戶(hù)還有可能在頁(yè)面加載的過(guò)程中切換方向)，我們就必須考慮N種屏幕尺寸規格。我們可以將 這些規格劃分為幾個(gè)大類(lèi)，然后為每一類(lèi)做一種方案，確保該方案至少在本組中盡量具有彈性。但即使這樣，結果也將是非常不爽的，誰(shuí)知道某類(lèi)設備在5年之后的 占有率是多少？而且很多用戶(hù)甚至不去將瀏覽器的窗口最大化；天哪，哥受不了了……

Morten Hjerde和他的哥們對2005至2008年市場(chǎng)中的400余種移動(dòng)設備進(jìn)行了統計(查看報告)，下圖為大致統計結果：

詳解響應式網(wǎng)頁(yè)設計與應用,PS教程,

在08年之后，更多更有代表性的新設備問(wèn)世并普及了。顯然，我們不可以沿著(zhù)“多方案”的思路繼續走下去；那么我們應該怎樣做呢？

部分解決方案：一切彈性化
幾年前，彈性布局(flexible layout)幾乎是一種奢侈品，所謂彈性，也只是體現在豎排布局以及字號等方面；圖片尺寸無(wú)法變化，這就導致圖片破壞了頁(yè)面結構，而且即使是有彈性的元 素，在很多情況下他會(huì )亂彈，仍然是一塌糊涂。所以，所謂的彈性布局其實(shí)并非那樣彈性，它有時(shí)甚至不能適應臺式機與筆記本的屏幕分辨率差異，更不用說(shuō)手機等 移動(dòng)設備了。

現在，我們可以通過(guò)響應式的設計和開(kāi)發(fā)思路讓頁(yè)面更加”彈性”了。圖片的尺寸可以自動(dòng)調整，頁(yè)面布局再不會(huì )被破壞。雖然永遠沒(méi)有最完美的方案，但它給了我們更多選擇。無(wú)論用戶(hù)切換設備的屏幕定向方式，還是從臺式機屏幕轉到iPad上瀏覽，頁(yè)面都會(huì )真正的富有彈性。

在前文提到的Ethan Marcotte的文章中，他通過(guò)一個(gè)實(shí)例展示了響應式Web設計在頁(yè)面彈性方面的特性：

 詳解響應式網(wǎng)頁(yè)設計與應用,PS教程,

該實(shí)例的實(shí)現方式完美的結合了液態(tài)網(wǎng)格和液態(tài)圖片技術(shù)，并且聰明的在正確的地方使用了正確的HTML標記?！币簯B(tài)網(wǎng)格”是一種很常見(jiàn)的實(shí)現方式；對于“液態(tài)圖片”技術(shù)，下面的文章做了不錯的介紹：

Hiding and Revealing Portions of Images
Creating Sliding Composite Images
Foreground Images That Scale With the Layout
說(shuō)到創(chuàng )建液態(tài)頁(yè)面，最好看看Zoe Mickley Gillenwater的那本《Flexible Web Design: Creating Liquid and Elastic Layouts with CSS》 “怎樣創(chuàng )建彈性圖片”。另外，Zoe的這篇”Essential Resources for Creating Liquid and Elastic Layouts.“提供了不少關(guān)于創(chuàng )建彈性網(wǎng)格和布局的教程、資源、創(chuàng )意指導和實(shí)現方式。

從技術(shù)角度講，雖然聽(tīng)上去這些都很簡(jiǎn)單，但它著(zhù)實(shí)相當復雜。舉個(gè)例子，仔細觀(guān)察Ethan Marcotte提供的實(shí)例中的logo圖片：

詳解響應式網(wǎng)頁(yè)設計與應用,PS教程,

如果我們將瀏覽器窗口不斷調小，會(huì )發(fā)現logo圖片的文字部分始終會(huì )保持同比縮小，保證其完整可讀，而不會(huì )和周?chē)牟鍒D一樣被兩邊裁掉。所以整個(gè)logo其實(shí)包括兩部分：插圖作為頁(yè)面標題的背景圖片，會(huì )保持尺寸，但會(huì )隨著(zhù)布局調整而被裁切；文字部分則是一張單獨的圖片。

<h1 id="logo"><a href="#"><img src="site/logo.png" target="_blank" closure_uid_lds9ka="1914">液態(tài)圖片一文中也有提到。
 

img { max-width: 100%; }

只要沒(méi)有其他涉及到圖片寬度的樣式代碼覆蓋掉這一行規則，頁(yè)面上所有的圖片就會(huì )以其原始寬度進(jìn)行加載，除非其他設備可視 部分的寬度小于圖片的原始寬度。上面的代碼確保圖片最大的寬度不會(huì )超過(guò)瀏覽器窗口或是其容器可視部分的寬度，所以當窗口或容器的可視部分開(kāi)始變窄時(shí)，圖片 的最大寬度值也會(huì )相應的減小，圖片本身永遠不會(huì )容器邊緣隱藏和覆蓋。實(shí)際上，就像Jason Grigsby在他的CSS Media Query for Mobile is Fool’s Gold一文中提到的，”液態(tài)圖片背后的思路，就是無(wú)論何時(shí)，都確保在其原始寬度范圍內，以最大的寬度同比完整的顯示圖片。我們不必在樣式表中為圖片設置寬度和高度，只需要讓樣式表在窗口尺寸發(fā)生變化時(shí)輔助瀏覽器對圖片進(jìn)行縮放?！?一種簡(jiǎn)而美的方法。


圖片本身的分辨率及加載時(shí)間是另外一個(gè)需要考慮的問(wèn)題。雖然通過(guò)上面的方法，可以很輕松的縮放圖片，確保在移動(dòng)設備的窗口中可以被完整瀏覽，但如果原始圖片本身過(guò)大，便會(huì )顯著(zhù)降低圖片文件的下載速度，對存儲空間也會(huì )造成沒(méi)有必要的消耗。


響應式圖片

由Filament Group提出的”響應式圖片”技術(shù)思想，有助于解決上面提到的問(wèn)題：不僅要同比的縮放圖片，還要在小設備上降低圖片自身的分辨率?？梢钥聪耫emo頁(yè)面先。


詳解響應式網(wǎng)頁(yè)設計與應用,PS教程,


這個(gè)技術(shù)的實(shí)現需要使用幾個(gè)相關(guān)文件，我們可以在Github上獲取。包括一個(gè)JavaScript文件(rwd-images.js)，一個(gè).htaccess文件，以及一些范例資源文件。具體使用方法可以參考Responsive Images的說(shuō)明文檔。 大致的原理是，rwd-images.js會(huì )檢測當前設備的屏幕分辨率，如果是大屏幕設備，則向頁(yè)面head部分中添加BASE標記，并將后續的圖片、腳 本和樣式表加載請求定向到一個(gè)虛擬路徑”/rwd-router”。當這些請求到達服務(wù)器端，.htacces文件會(huì )決定這些請求所需要的是原始圖片還是 小尺寸的”響應式圖片”，并進(jìn)行相應的反饋輸出。對于小屏幕的移動(dòng)設備，原始尺寸的大圖片永遠不會(huì )被用到。


<img src="smallRes.jpg" data-fullsrc="largeRes.jpg">

Date-fullsrc是html5中的一個(gè)定義文件的屬性，寬度超過(guò)480px的屏幕，就會(huì )加載較大分辨率的圖片（largeRes.jpg），小屏幕分辨率的就會(huì )加載較小的圖片（smallRes.jpg）。


JS文件中插入一個(gè)基本元素，允許頁(yè)面將圖像重新定向，當頁(yè)面加載時(shí)只是加載適合屏幕分辨率的圖片，而其他圖像不會(huì )被下載。尤其是帶有大量圖片的網(wǎng)站，這種技術(shù)可以節省很大的帶寬和加載時(shí)間。


這項技術(shù)支持多數的現代瀏覽器，包括IE8+、Safari、Chrome和Opera，以及這些瀏覽器的移動(dòng)設備版本；在FireFox及一些舊瀏覽器中，則會(huì )優(yōu)雅降級：我們仍可得到小圖片的輸出，但同時(shí)，原始大圖也會(huì )被下載。


禁用iPhone中的圖片自動(dòng)縮放

在iPhone及iPod Touch中，頁(yè)面會(huì )被自動(dòng)的同比例縮小至最適合屏幕大小的尺寸，x軸不會(huì )產(chǎn)生滾動(dòng)條，用戶(hù)可以上下拖拽瀏覽全部頁(yè)面，或在需要的時(shí)候放大頁(yè)面的局部。這 里會(huì )產(chǎn)生一個(gè)問(wèn)題，即使我們運用響應式Web設計的思想，專(zhuān)門(mén)為iPhone的小屏輸出小圖片，它同樣會(huì )隨著(zhù)整個(gè)頁(yè)面一起被同比例縮小，如下圖左側所示。


詳解響應式網(wǎng)頁(yè)設計與應用,PS教程,


我們可以使用蘋(píng)果專(zhuān)有的一些meta標記來(lái)解決類(lèi)似的問(wèn)題。在頁(yè)面的<head>部分添加以下代碼(詳情可以參考Think Vitamin的相關(guān)文章)：


<meta name="viewport" content="device-width; initial-scale=1.0">

將initial-scale的值設定為”1″，即可覆寫(xiě)默認的縮放方式，保持原始的尺寸及比例。更多關(guān)于viewport meta標記的用法，可以參考蘋(píng)果官方的文檔。


打造布局結構

當頁(yè)面所需要適應的不同設備的屏幕尺寸差異過(guò)大時(shí)，除了圖片方面，我們也應該考慮到整個(gè)布局結構的智能化調整；我們可以 使用獨立的樣式表，或者更有效的，使用CSS media query。這不會(huì )引起多大的麻煩，多數樣式設定不會(huì )被影響和改變，只有一些特定的元素會(huì )通過(guò)浮動(dòng)、寬度和高度等的設置來(lái)改變位置。


我們可以使用一個(gè)默認主樣式表來(lái)定義頁(yè)面的主要結構元素，比如#wrapper、#content、#sidebar、#nav等的默認布局方式，以及一些全局性的配色和字體方案。


我們可以監測頁(yè)面布局隨著(zhù)不同的瀏覽環(huán)境而產(chǎn)生的變化，如果它們變的過(guò)窄過(guò)短或是過(guò)寬過(guò)長(cháng)，則通過(guò)一個(gè)子級樣式表來(lái)繼承主樣式表的設定，并專(zhuān)門(mén)針對某些布局結構進(jìn)行樣式覆寫(xiě)。我們來(lái)看下代碼示例：


下面的代碼可以放在默認主樣式表style.css中：


/* Default styles that will carry to the child style sheet */html,body{   background...   font...   color...}h1,h2,h3{}p, blockquote, pre, code, ol, ul{}/* Structural elements */#wrapper{    width: 80%;    margin: 0 auto;    background: #fff;    padding: 20px;}#content{    width: 54%;    float: left;    margin-right: 3%;}#sidebar-left{    width: 20%;    float: left;    margin-right: 3%;}#sidebar-right{    width: 20%;    float: left;}下面代碼可以放在子級樣式表mobile.css中，專(zhuān)門(mén)針對移動(dòng)設備進(jìn)行樣式覆寫(xiě)：#wrapper{    width: 90%;}#content{    width: 100%;}#sidebar-left{    width: 100%;    clear: both;    /* Additional styling for our new layout */    border-top: 1px solid #ccc;    margin-top: 20px;}#sidebar-right{    width: 100%;    clear: both;    /* Additional styling for our new layout */    border-top: 1px solid #ccc;    margin-top: 20px;}*/