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

哈爾濱ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場景，ssl證書未來市場廣闊！成為創(chuàng)新互聯(lián)建站的ssl證書銷售渠道，可以享受市場價格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：13518219792（備注：SSL證書合作）期待與您的合作！

推薦專題：響應(yīng)式Web設(shè)計

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

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

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

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

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

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

調(diào)整分辨率

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

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

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

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

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

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

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

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

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

Hiding and Revealing Portions of Images（http://zomigi.com/blog/hiding-and-revealing-portions-of-images/）

Creating Sliding Composite Images（http://zomigi.com/blog/creating-sliding-composite-images/）

Foreground Images That Scale With the Layout（http://zomigi.com/blog/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)建彈性圖片（http://www.flexiblewebbook.com/bonus.html）"。另外，Zoe的這篇"Essential Resources for Creating Liquid and Elastic Layouts.（http://zomigi.com/blog/essential-resources-for-creating-liquid-and-elastic-layouts/）"提供了不少關(guān)于創(chuàng)建彈性網(wǎng)格和布局的教程、資源、創(chuàng)意指導(dǎo)和***實踐方式。

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

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

其中，

元素使用插圖作為背景，文字部分的圖片始終保持與背景的對齊。

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

#p#

彈性圖片

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

img { max-width: 100%;}

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

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

響應(yīng)式圖片

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

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

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

禁用iPhone中的圖片自動縮放

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

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

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

#p#

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

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

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

我們可以監(jiān)測頁面布局隨著不同的瀏覽環(huán)境而產(chǎn)生的變化，如果它們變的過窄過短或是過寬過長，則通過一個子級樣式表來繼承主樣式表的設(shè)定，并專門針對某些布局結(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; 
  
  
  
  
}
 
 
 
 

下面的代碼可以放在子級樣式表mobile.css中，專門針對移動設(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; 
  
  
  
  
}
 
 
 
 

大致的視覺效果如下圖所示：

Media Queries

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

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

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

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

 
 
 
 

  
  
  
  
/* 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 */ 
  
  
  
  
}
 
 
 
 

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

CSS3 Media Queries

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

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

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

 
 
 
 

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

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

 
 
 
 

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

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

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

 
 
 
 

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

 
 
 
 

  
  
  
  
@media screen and (min-device-width: 768px) { 
  
  
  
  
.minimumiPadWidth { 
  
  
  
  
clear: both; 
  
  
  
  
margin-bottom: 2px solid #ccc; 
  
  
  
  
} 
  
  
  
  
}
 
 
 
 

還有一些其他方法，可以幫我們有效的使用media queries鎖定某些指定的設(shè)備?？梢詤⒖枷旅鎯善鲎訲homas Maier的文章：

CSS for iPhone 4 (Retina display)（http://thomasmaier.me/2010/06/css-for-iphone-4-retina-display/）

How To: CSS for the iPad（http://thomasmaier.me/2010/03/howto-css-for-the-ipad/）

對于iPad來說，orientation屬性尤其有用。它的值可以是landscape(橫屏)或portrait(豎屏)。

 
 
 
 

  
  
  
  
@media screen and (orientation: landscape) { 
  
  
  
  
.iPadLandscape { 
  
  
  
  
width: 30%; 
  
  
  
  
float: right; 
  
  
  
  
} 
  
  
  
  
}
 
 
 
 

 
 
 
 

  
  
  
  
@media screen and (orientation: portrait) { 
  
  
  
  
.iPadPortrait { 
  
  
  
  
clear: both; 
  
  
  
  
} 
  
  
  
  
}
 
 
 
 

不幸的是，這個屬性目前確實只在iPad上有效。對于其他可以轉(zhuǎn)屏的設(shè)備，譬如iPhone，可以使用min-device-width和max-device-width來變通實現(xiàn);詳情可以參考"Determine iPhone orientation using CSS"一文。

我們還可以將上述屬性組合使用，來鎖定某個屏幕尺寸范圍：

 
 
 
 

  
  
  
  
@media screen and (min-width: 800px) and (max-width: 1200px) { 
  
  
  
  
.classForaMediumScreen { 
  
  
  
  
background: #cc0000; 
  
  
  
  
width: 30%; 
  
  
  
  
float: right; 
  
  
  
  
} 
  
  
  
  
}
 
 
 
 

上面的代碼可以作用于瀏覽器窗口或屏幕寬度在800px至1200px之間的所有設(shè)備。

其實，很多設(shè)計師和開發(fā)者仍會選擇使用多個樣式表的方式來實現(xiàn)media queries。如果從資源的組織和維護(hù)的角度出發(fā)，其益處確實高于效率的損耗的話，那么這樣做也完全不壞：

所以吶，凡事沒有絕對，***根據(jù)實際情況決定使用media queries的方式。比如，對于iPad，我們可以將多個media queries直接寫在一個樣式表中。因為iPad用戶隨時有可能切換屏幕定向，這種情況下，要保證頁面在極短的時間內(nèi)響應(yīng)屏幕尺寸的調(diào)整，我們必須選擇效率***的方式。

JavaScript

JavaScript也是我們的武器之一，特別是當(dāng)某些舊設(shè)備無法***支持CSS3的media query時，它可以作為后備支援。幸運的是，已經(jīng)有專門的JS庫來幫助舊瀏覽器(IE 5+，F(xiàn)irefox 1+，Safari 2等)支持CSS3的media queries。使用方法很簡單，下載css3-mediaqueries.js并在你的頁面中調(diào)用它。

而下面的代碼則演示了怎樣使用簡單的幾行jQuery代碼來檢測瀏覽器寬度，并為不同的情況調(diào)用不同的樣式表：

類似這樣的解決方案還有很多。所以我們要清楚，media queries不是一個絕對唯一的答案，它只是一個以純CSS方式實現(xiàn)響應(yīng)式Web設(shè)計思路的手段。借助JavaScript，我們則可以實現(xiàn)更多的變化。這篇"Combining Media Queries and JavaScript"向我們展示了JavaScript配合media queries的更多細(xì)節(jié)信息。

#p#

顯示或隱藏內(nèi)容

通過前文的學(xué)習(xí)，我們已經(jīng)了解到，對于響應(yīng)式Web設(shè)計，同比例縮減元素尺寸以及調(diào)整頁面結(jié)構(gòu)布局，是兩個重要的方式方法。但是對于頁面中的文字內(nèi)容信息來說，則不能簡單的只從"同比縮小"和"調(diào)整布局結(jié)構(gòu)"這兩方面去處理。對于手機等移動設(shè)備來說，在文字內(nèi)容方面，已經(jīng)有了很多***實踐方式和指導(dǎo)原則：簡化的導(dǎo)航、更易聚焦的內(nèi)容、以信息列表代替?zhèn)鹘y(tǒng)的多行文案內(nèi)容等。

響應(yīng)式Web設(shè)計的思想，一方面要保證頁面元素及布局具有足夠的彈性，來兼容各類設(shè)備平臺和屏幕尺寸;另一方面，則是增強可讀性和易用性，幫助用戶在任何設(shè)備環(huán)境中都能更容易的獲取最重要的內(nèi)容信息。

有一條樣式代碼，我們已經(jīng)使用了多年：

display: none;

我們可以在一個針對某類小屏幕設(shè)備的樣式表中使用它來隱藏掉頁面中的某些塊級元素，也可以使用前文的方法，通過JS判斷當(dāng)前硬件屏幕規(guī)格，在小屏幕設(shè)備的情況下直接為需要隱藏的元素添加工具類class。比如，對于手機類設(shè)備，我們可以隱藏掉大塊的文字內(nèi)容區(qū)，而只顯示一個簡單的導(dǎo)航結(jié)構(gòu)，其中的導(dǎo)航元素可以指向詳細(xì)內(nèi)容頁面。

注意，不要使用visibility: hidden的方式，因為這只能使元素在視覺上不做呈現(xiàn);display屬性則可幫助我們設(shè)置整塊內(nèi)容是否需要被輸出。對于移動設(shè)備來說，避免這些不必要的資源浪費還是很重要的。我們來看一個簡單的示例：

圖中上半部分是大屏幕設(shè)備所顯示的完整頁面，下面的則是該頁面在小屏幕設(shè)備的呈現(xiàn)方式。頁面HTML代碼如下：

 
 
 
 

  
  
  
  
Left Sidebar Content | Right Sidebar Content

  
  
  
  

  
  
  
  
Main Content