開(kāi)始第一篇。老規(guī)矩，先無(wú)聊的談?wù)撎鞖庖活惖脑掝}。十一長(zhǎng)假，天氣也終于開(kāi)始有些秋天的味道，坐在屋里甚至覺(jué)得需要熱咖啡。話說(shuō)兩年前也是在國(guó)慶假期里開(kāi)始做Joomla文檔翻譯的；長(zhǎng)假好時(shí)光，總會(huì)可以抽出一兩天，安靜的窩在家里做做博客、學(xué)做些新東西，簡(jiǎn)直沒(méi)有比這更舒心的事情。

說(shuō)正事兒。準(zhǔn)備在近期的幾篇里集中翻譯學(xué)習(xí)一下“響應(yīng)式Web設(shè)計(jì)”的相關(guān)話題，包括概念、實(shí)踐方式、案例及觀點(diǎn)討論等方面。相比于從前做的文檔譯文，這些文章篇幅要長(zhǎng)的多(甚至要加分頁(yè)了！…)，今天放上的這篇幾乎花掉了兩天的“閑暇時(shí)間”；對(duì)耐力是個(gè)考驗(yàn)，努力提高嘍。廢話結(jié)束，here we go.

眼下，幾乎每個(gè)新客戶都希望他們的網(wǎng)站可以有專門(mén)的移動(dòng)設(shè)備版本。最好的情況吶，就是為iPhone、iPad、黑莓、Kindle…各自打造一款——頁(yè)面分辨率還必須兼容任何設(shè)備。誰(shuí)知道未來(lái)5年內(nèi)我們還需要為多少新發(fā)明的設(shè)備設(shè)計(jì)開(kāi)發(fā)不同版本的頁(yè)面？這種瘋狂什么時(shí)候算個(gè)頭？

在Web設(shè)計(jì)和開(kāi)發(fā)領(lǐng)域，很快的，我們將會(huì)無(wú)法跟上設(shè)備與分辨率革新的步伐。對(duì)于多數(shù)網(wǎng)站來(lái)說(shuō)，為每種新設(shè)備及分辨率創(chuàng)建其獨(dú)立的版本根本就是不切實(shí)際的；結(jié)果就是，我們將會(huì)贏得使用某些設(shè)備的用戶群，而失去那些使用其他設(shè)備的用戶。不過(guò)，或許會(huì)有另外一種方式，可以幫助我們避免這種情況的發(fā)生。

響應(yīng)式Web設(shè)計(jì)(Responsive Web design)的理念是，頁(yè)面的設(shè)計(jì)與開(kāi)發(fā)應(yīng)當(dāng)根據(jù)用戶行為以及設(shè)備環(huán)境(系統(tǒng)平臺(tái)、屏幕尺寸、屏幕定向等)進(jìn)行相應(yīng)的響應(yīng)和調(diào)整。具體的實(shí)踐方式由多方面組成，包括彈性網(wǎng)格和布局、圖片、CSS media query的使用等。無(wú)論用戶正在使用筆記本還是iPad，我們的頁(yè)面都應(yīng)該能夠自動(dòng)切換分辨率、圖片尺寸及相關(guān)腳本功能等，以適應(yīng)不同設(shè)備；換句話說(shuō)，頁(yè)面應(yīng)該有能力去自動(dòng)響應(yīng)用戶的設(shè)備環(huán)境。這樣，我們就可以不必為不斷到來(lái)的新設(shè)備做專門(mén)的版本設(shè)計(jì)和開(kāi)發(fā)了。

響應(yīng)式Web設(shè)計(jì)的概念

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

最近出現(xiàn)了一門(mén)新興的學(xué)科——“響應(yīng)式建筑(responsive architecture)”——提出，物理空間應(yīng)該可以根據(jù)存在于其中的人的情況進(jìn)行響應(yīng)。結(jié)合嵌入式機(jī)器人技術(shù)以及可拉伸材料的應(yīng)用，建筑師們正在嘗試建造一種可以根據(jù)周圍人群的情況進(jìn)行彎曲、伸縮和擴(kuò)展的墻體結(jié)構(gòu)；還可以使用運(yùn)動(dòng)傳感器配合氣候控制系統(tǒng)，調(diào)整室內(nèi)的溫度及環(huán)境光。已經(jīng)有公司在生產(chǎn)“智能玻璃”：當(dāng)室內(nèi)人數(shù)達(dá)到一定的閥值時(shí)，這種玻璃可以自動(dòng)變?yōu)椴煌该?，確保隱私。

將這個(gè)思路延伸到Web設(shè)計(jì)的領(lǐng)域，我們就得到了一個(gè)全新的概念。為什么一定要為每個(gè)用戶群各自打造一套設(shè)計(jì)和開(kāi)發(fā)方案？和響應(yīng)式建筑相似，Web設(shè)計(jì)同樣應(yīng)該做到根據(jù)不同設(shè)備環(huán)境自動(dòng)響應(yīng)及調(diào)整。

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

調(diào)整分辨率

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

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

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

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

部分解決方案：一切彈性化

幾年前，彈性布局(flexible layout)幾乎是一種奢侈品，所謂彈性，也只是體現(xiàn)在豎排布局以及字號(hào)等方面；圖片始終可以輕易的破壞頁(yè)面結(jié)構(gòu)，而且即使是哪些彈性的元素結(jié)構(gòu)，在很極端的情況下，仍會(huì)破壞布局。所以，所謂的彈性布局其實(shí)并非那樣彈性，它有時(shí)甚至不能適應(yīng)臺(tái)式機(jī)與筆記本的屏幕分辨率差異，更不用說(shuō)手機(jī)等移動(dòng)設(shè)備了。

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

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

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

• 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》，或是下載個(gè)樣章先：“怎樣創(chuàng)建彈性圖片”。另外，Zoe的這篇“Essential Resources for Creating Liquid and Elastic Layouts.”提供了不少關(guān)于創(chuàng)建彈性網(wǎng)格和布局的教程、資源、創(chuàng)意指導(dǎo)和實(shí)踐方式。

從技術(shù)角度講，雖然聽(tīng)上去這些都簡(jiǎn)單可行，但它比“將這些功能結(jié)合在一起”要復(fù)雜些。舉個(gè)例子，仔細(xì)觀察Ethan Marcotte提供的實(shí)例中的logo圖片：

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

?

1 2 3

<h1 id="logo"> <a href="#"><img src="site/logo.png" alt="The Baker Street Inquirer" /></a> </h1>

其中，<h1>元素使用插圖作為背景，文字部分的圖片始終保持與背景的對(duì)齊。

這個(gè)實(shí)例小小的展示一下響應(yīng)式Web設(shè)計(jì)的思路。不過(guò)這點(diǎn)小努力還不足以避免整個(gè)布局在小尺寸窗口中變的過(guò)窄或過(guò)短，并且logo文字最終會(huì)變的小到難以識(shí)別，背景圖片也會(huì)被過(guò)多的裁切。

彈性圖片

響應(yīng)式Web設(shè)計(jì)的思路中，一個(gè)重要的因素是怎樣處理圖片方面的問(wèn)題。有很多同比縮放圖片的技術(shù)，其中有不少是簡(jiǎn)單易行的。其中，由Richard Rutter最先嘗試的一種做法比較流行，即使用CSS的max-width屬性。這個(gè)方法在Ethan Marcotte的液態(tài)圖片一文中也有提到。

?

1	img { max-width: 100%;}

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

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

響應(yīng)式圖片

由Filament Group提出的“響應(yīng)式圖片”技術(shù)思想，有助于解決上面提到的問(wèn)題：不僅要同比的縮放圖片，還要在小設(shè)備上降低圖片自身的分辨率。可以看下demo頁(yè)面先。

這個(gè)技術(shù)的實(shí)現(xiàn)需要使用幾個(gè)相關(guān)文件，我們可以在Github上獲取。包括一個(gè)JavaScript文件(rwd-images.js)，一個(gè).htaccess文件，以及一些范例資源文件。具體使用方法可以參考Responsive Images的說(shuō)明文檔。大致的原理是，rwd-images.js會(huì)檢測(cè)當(dāng)前設(shè)備的屏幕分辨率，如果是大屏幕設(shè)備，則向頁(yè)面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ì)被用到。

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

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

?

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

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

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

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

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

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

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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

/* 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中，專門(mén)針對(duì)移動(dòng)設(shè)備進(jìn)行樣式覆寫(xiě)：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

#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; }

大致的視覺(jué)效果如下圖所示：

Media Queries

CSS3支持CSS2.1所支持的所有媒體類型，例如screen、print、handheld等，同時(shí)添加了很多涉及媒體類型的功能屬性，包括max-width(大寬度)、device-width(設(shè)備寬度)、orientation(屏幕定向，橫屏或豎屏)和color。在CSS3發(fā)布之后出現(xiàn)的新玩具，如iPad或Android相關(guān)設(shè)備，都可以好的支持這些屬性。所以我們可以通過(guò)media query為新設(shè)備設(shè)置獨(dú)特的樣式，而忽略那些不支持CSS3的臺(tái)式機(jī)中的舊瀏覽器。

在Ethan的文章中，我們能看到一段media query使用實(shí)例：

?

1 2 3

<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="shetland.css" />

代碼本身可以很好的說(shuō)明工作機(jī)制：如果頁(yè)面通過(guò)屏幕呈現(xiàn)(非打印一類)，并且屏幕寬度不超過(guò)480px，則加載shetland.css樣式表。要了解更多關(guān)于CSS3媒體新屬性的信息，可以參考“The Orientation Media Query”一文。

我們可以創(chuàng)建多個(gè)樣式表，以適應(yīng)不同設(shè)備類型的寬度范圍。Ethan的文章中的“Meet the media query”部分有更多的范例及解釋。更有效率的做法是，將多個(gè)media queries整合在一個(gè)樣式表文件中：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

/* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } /* Smartphones (landscape) ----------- */ @media only screen and (min-width : 321px) { /* Styles */ } /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { /* Styles */ }

上面的代碼來(lái)自于Andy Clark創(chuàng)建的可以兼容各種主流設(shè)備的免費(fèi)模板。這樣整合多個(gè)media queries于一個(gè)樣式表文件的方式，與通過(guò)media queries調(diào)用不同樣式表的方式之間的區(qū)別與聯(lián)系，可以參考“Hardboiled CSS3 Media Queries”一文。

CSS3 Media Queries

上面演示的一些代碼范例是CSS2.1與CSS3通吃的。現(xiàn)在讓我們來(lái)看看怎樣使用CSS3專有的media queries功能來(lái)創(chuàng)建響應(yīng)式Web設(shè)計(jì)。其中某些方法在當(dāng)前就有切實(shí)的使用價(jià)值，不久的將來(lái)則一定會(huì)全部派上用場(chǎng)。

min-width和max-width這兩個(gè)屬性很靠譜。通過(guò)min-width的設(shè)置，我們可以在瀏覽器窗口或設(shè)備屏幕寬度高于這個(gè)值的情況下，為頁(yè)面指定一個(gè)特定的樣式表；max-width則反之。

下面的幾個(gè)示例中，我們使用的是將多個(gè)media queries整合在單一樣式表中進(jìn)行編碼的句法。如前文所述，這樣做更加高效，減少請(qǐng)求數(shù)量。

?

1 2 3 4 5 6

@media screen and (min-width: 600px) { .hereIsMyClass { width: 30%; float: right; } }

上面代碼中定義的類(hereIsMyClass)只有在瀏覽器或屏幕寬度超過(guò)600px時(shí)才會(huì)有效。

?

1 2 3 4 5 6

@media screen and (max-width: 600px) { .aClassforSmallScreens { clear: both; font-size: 1.3em; } }

而這段代碼的作用則相反：aClassforSmallScreens類只有在瀏覽器或屏幕寬度小于600px時(shí)才會(huì)有效。

可以看出min-width和max-width可以同時(shí)判斷設(shè)備屏幕尺寸與瀏覽器實(shí)際寬度。有些時(shí)候，我們希望通過(guò)media queries作用于某種特定的設(shè)備，而忽略其上運(yùn)行的瀏覽器是否由于沒(méi)有大化而在尺寸上與設(shè)備屏幕尺寸產(chǎn)生不一致的情況。這時(shí)，我們需要使用min-device-width與max-device-width，用來(lái)判斷設(shè)備本身的屏幕尺寸。

?

1 2 3 4 5

@media screen and (max-device-width: 480px) { .classForiPhoneDisplay { font-size: 1.2em; } }

?

什么是響應(yīng)式Web設(shè)計(jì)？怎樣進(jìn)行？
文章來(lái)源：http://jinyejixie.com/news16/162116.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營(yíng)銷、全網(wǎng)營(yíng)銷推廣、手機(jī)網(wǎng)站建設(shè)、軟件開(kāi)發(fā)、小程序開(kāi)發(fā)、品牌網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)