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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Hiding and Revealing Portions of Images
Creating Sliding Composite Images
Foreground Images That Scale With the Layout
說到創(chuàng)建液態(tài)頁面，最好看看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)意指導(dǎo)和實(shí)現(xiàn)方式。

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

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

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

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

img { max-width: 100%; }

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


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


響應(yīng)式圖片

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


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


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


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

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


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


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


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

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


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


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


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

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


打造布局結(jié)構(gòu)

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


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


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


下面的代碼可以放在默認(rèn)主樣式表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;}下面代碼可以放在子級(jí)樣式表mobile.css中，專門針對(duì)移動(dòng)設(shè)備進(jìn)行樣式覆寫：#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;}*/