響應式Web設計（HTML5和CSS3實戰(zhàn)）

響應式Web設計HTML5和CSS3實戰(zhàn)目錄\h1HTML5、CSS3及響應式設計入門\h1.1為什么智能手機很重要（而老版的IE不再重要）\h1.2響應式設計一定是最佳選擇嗎\h1.3響應式網(wǎng)頁設計的定義\h1.4為什么要在響應式設計上停滯不前\h1.5響應式網(wǎng)頁設計示例\h1.5.1下載視口調(diào)試工具\h1.5.2在線創(chuàng)意源泉\h1.6為什么HTML5很優(yōu)秀\h1.6.1省時省力\h1.6.2新增了語義化標簽元素\h1.7CSS3為響應式設計和更多創(chuàng)新奠定了基礎(chǔ)\h1.7.1底線：CSS3不破壞任何東西\h1.7.2CSS3如何解決日常設計問題\h1.8看吶，不用圖片\h1.9HTML5和CSS3現(xiàn)在就能用嗎\h1.10響應式網(wǎng)頁設計不是靈丹妙藥\h1.11引導客戶：網(wǎng)站不必在所有瀏覽器中表現(xiàn)一致\h1.12小結(jié)\h2媒體查詢：支持不同的視口\h2.1現(xiàn)在就能使用媒體查詢\h2.2為什么響應式設計需要媒體查詢\h2.2.1媒體查詢語法\h2.2.2媒體查詢能檢測那些特性\h2.2.3用媒體查詢改造我們的設計\h2.2.4加載媒體查詢的最佳方法\h2.3我們的第一個響應式設計\h2.3.1我們的設計是固定寬度的，不要驚訝\h2.3.2響應式設計中要保證圖片盡可能精簡\h2.3.3小視口下的內(nèi)容剪切\(zhòng)h2.4阻止移動瀏覽器自動調(diào)整頁面大小\h2.5針對不同視口寬度修正設計\h2.6響應式設計中內(nèi)容始終優(yōu)先\h2.7媒體查詢只是必要條件之一\h2.8小結(jié)\h3擁抱流式布局\h3.1固定布局經(jīng)不起未來考驗\h3.2為什么響應式設計需要百分比布局\h3.3將網(wǎng)頁從固定布局修改為百分比布局\h3.3.1需要牢記的公式\h3.3.2設置百分比元素的上下文\h3.3.3必須時刻牢記上下文\h3.4用em替換px\h3.5彈性圖片\h3.5.1讓圖片隨視口縮放\h3.5.2為特定圖片指定特定規(guī)則\h3.5.3給彈性圖片設置閾值\h3.5.4超級全能的max-width屬性\h3.6為不同的屏幕尺寸提供不同的圖片\h3.7流動網(wǎng)格布局和媒體查詢的默契配合\h3.8CSS網(wǎng)格系統(tǒng)\h3.9小結(jié)\h4響應式設計中的HTML5\h4.1HTML5的哪些部分現(xiàn)在就能用\h4.1.1大多數(shù)網(wǎng)站可以用HTML5編寫\h4.1.2膩子腳本和Modernizr\h4.2如何編寫HTML5網(wǎng)頁\h4.2.1HTML5的精簡之道\h4.2.2HTML5標簽的合理寫法\h4.2.3偉大的＜a＞標簽萬歲\h4.2.4HTML的廢棄零件\h4.3HTML5的全新語義化元素\h4.3.1＜section＞\h4.3.2＜nav＞\h4.3.3＜article＞\h4.3.4＜aside＞\h4.3.5＜hgroup＞\h4.3.6＜header＞\h4.3.7＜footer＞\h4.3.8＜address＞\h4.4HTML5結(jié)構(gòu)元素的實際用法\h4.5HTML5的文本級語義元素\h4.5.1＜b＞\h4.5.2＜em＞\h4.5.3＜i＞\h4.5.4在頁面中應用文本層語義元素\h4.6遵循WAI-ARIA實現(xiàn)無障礙站點\h4.7在HTML5中嵌入媒體\h4.8用HTML5的方法為頁面添加視頻或音頻\h4.8.1提供備用的媒體源文件\h4.8.2針對老版本瀏覽器的備用方案\h4.8.3和標簽的用法基本一致\h4.9響應式視頻\h4.10離線Web應用\h4.10.1離線Web應用概述\h4.10.2讓網(wǎng)頁可離線使用\h4.10.3理解manifest文件\h4.10.4頁面被自動加載到離線緩存\h4.10.5版本注釋的用途\h4.10.6離線訪問網(wǎng)站\h4.10.7離線Web應用的故障診斷\h4.11小結(jié)\h5CSS3：選擇器、字體和顏色模式\h5.1CSS3給前端開發(fā)人員帶來了什么\h5.1.1InternetExplorer6到8對CSS3的支持\h5.1.2使用CSS3設計和開發(fā)頁面\h5.2CSS規(guī)則解析\h5.3私有前綴及其用法\h5.4快速而有效的CSS技巧\h5.4.1CSS3多欄布局\h5.4.2文字換行\(zhòng)h5.5CSS3的新增選擇器及其用法\h5.5.1CSS3屬性選擇器\h5.5.2CSS3結(jié)構(gòu)偽類\h5.5.3對偽元素的修正\h5.6自定義網(wǎng)頁字體\h5.6.1@font-face規(guī)則\h5.6.2使用@font-face嵌入網(wǎng)頁字體\h5.7幫幫我，標題模糊怎么辦\h5.8新的CSS3顏色格式和透明度\h5.8.1RGB顏色\h5.8.2HSL顏色\h5.8.3針對IE6、IE7和IE8提供備用顏色值\h5.8.4透明通道\h5.9小結(jié)\h6用CSS3創(chuàng)造令人驚艷的美\h6.1文字陰影\h6.1.1HEX、HSL或RGB顏色都可以\h6.1.2px、em或rem都行\(zhòng)h6.1.3取消文字陰影\h6.1.4制作浮雕文字陰影效果\h6.1.5多重文字陰影\h6.2盒陰影\h6.2.1內(nèi)陰影\h6.2.2多重陰影\h6.3背景漸變\h6.3.1線性背景漸變\h6.3.2徑向背景漸變\h6.3.3重復漸變\h6.4背景漸變圖案\h6.5CSS3的響應性\h6.6組合使用CSS3屬性\h6.7多重背景圖片\h6.7.1背景圖片大小\h6.7.2背景圖片位置\h6.7.3背景屬性的縮寫語法\h6.8更多CSS特性\h6.9可縮放圖標：響應式設計中的完美選擇\h6.10小結(jié)\h7CSS3過渡、變形和動畫\h7.1什么是CSS3過渡以及如何使用它\h7.1.1過渡相關(guān)的屬性\h7.1.2響應式網(wǎng)站中的有趣過渡\h7.2CSS3的2D變形\h7.3嘗試CSS3的3D變形\h7.3.1分析3D變形效果\h7.3.23D變形尚未成熟\h7.4CSS3動畫效果\h7.5小結(jié)\h8用HTML5和CSS3征服表單\h8.1HTML5表單\h8.1.1理解HTML5表單中的元素\h8.1.2placeholder\h8.1.3required\h8.1.4autofocus\h8.1.5autocomplete\h8.1.6list（及對應的datalist元素）\h8.1.7HTML5的新輸入類型\h8.1.8日期和時間輸入類型\h8.2如何給不支持新特性的瀏覽器打補丁\h8.3使用CSS3美化HTML5表單\h8.4小結(jié)\h9解決跨瀏覽器問題\h9.1漸進增強與優(yōu)雅降級\h9.2該不該修復老版本IE\h9.2.1統(tǒng)計數(shù)據(jù)（再看看世界的變化）\h9.2.2個人選擇\h9.3前端的瑞士軍刀：Modernizr\h9.3.1使用Modernizr輔助修正樣式問題\h9.3.2使用Modernizr讓老版本IE支持HTML5元素\h9.3.3給IE6、7、8追加min/max媒體查詢功能\h9.3.4使用Modernizr按需加載資源\h9.4必要時將導航鏈接轉(zhuǎn)換為下拉菜單\h9.5高分辨率設備（未來趨勢）\h9.6小結(jié)1HTML5、CSS3及響應式設計入門直到最近，網(wǎng)站設計普遍還在使用固定寬度（如960像素），以期給所有終端用戶帶來較為一致的瀏覽體驗。這種固定寬度設計在筆記本電腦上顯示剛剛好，而在高分辨率顯示器上卻會在兩邊多出些空白。但現(xiàn)在有了智能手機。蘋果公司的iPhone第一次帶給我們真正意義上易用的手機上網(wǎng)體驗，之后其他公司紛紛效仿。現(xiàn)在人們可以舒服地使用手機上網(wǎng)沖浪，不用再像過去那樣需要有“挑圓片”\h(1)世界冠軍一樣的靈活拇指，才能在小屏幕上看看網(wǎng)頁。此外，消費者在家中上網(wǎng)時優(yōu)先使用小屏幕設備（如平板電腦、上網(wǎng)本）正成為趨勢。一個不爭的事實是，使用小屏幕設備上網(wǎng)的人數(shù)正在以前所未有的速度增長。與此同時，27英寸和30英寸的大顯示器也在快速普及。上網(wǎng)設備之間的尺寸差距與日俱增。幸運的是，面對不斷發(fā)展的瀏覽器和上網(wǎng)設備，我們有可行的解決方案。采用HTML5和CSS3技術(shù)的響應式網(wǎng)頁設計，可以使網(wǎng)站兼容多種設備和屏幕。而這種方法的最佳之處，在于不需要什么服務器端方案，也完全可以實現(xiàn)。本章內(nèi)容支持小屏幕設備的重要性什么是移動網(wǎng)站設計什么是響應式網(wǎng)頁設計優(yōu)秀響應式網(wǎng)頁實例賞析視口和屏幕的區(qū)別安裝和使用修改視口的瀏覽器擴展程序使用HTML5編寫更簡潔的標記使用CSS3解決常見的設計問題1.1為什么智能手機很重要（而老版的IE不再重要）雖然統(tǒng)計數(shù)據(jù)一般僅用作粗略參考，但來自的統(tǒng)計數(shù)據(jù)卻值得注意。從2010年7月到2011年7月的12個月中，全球手機瀏覽器的使用量從2.86%上升至7.02%。InternetExplorer6的使用率則是從8.79%下降到3.42%。到2011年7月，InternetExplorer7的使用率也降到了5.45%。如果客戶老是要求：“我們的網(wǎng)站必須兼容IE6和IE7！”你可以反駁說：“我們應該把精力花在更有價值的地方。”用手機上網(wǎng)的人比用臺式機和筆記本中的IE6或IE7上網(wǎng)的人多多了。你可以聽到全球前端開發(fā)工程師震耳欲聾的歡呼聲！越來越多的人使用小屏幕設備上網(wǎng)，這些設備上的瀏覽器在設計時都考慮到了如何顯示好現(xiàn)有網(wǎng)站。手機瀏覽器會將一個標準網(wǎng)頁縮小至與設備可視區(qū)域（標準技術(shù)術(shù)語叫做“視口”）恰好匹配。然后用戶在自己感興趣的內(nèi)容區(qū)域上放大瀏覽。這樣看起來已經(jīng)挺好了，那作為前端設計師和工程師的我們，為什么還要在這上面繼續(xù)優(yōu)化呢？在iPhone或Android手機上瀏覽的網(wǎng)頁越多（如上圖所示的那樣），就越能深刻體會到為什么我們還需要繼續(xù)優(yōu)化。為了看清楚頁面內(nèi)容，需要不停地放大、縮小頁面，然后為了看到視口外的文字，再左、右拖動，結(jié)果一不小心點了一個鏈接，你說討厭不討厭？我們當然可以做得更好！1.2響應式設計一定是最佳選擇嗎如果預算充足且形勢需要，做一個真正的“手機版”網(wǎng)站是首選。這樣就可以基于用戶的設備、位置、連接速度，以及包括技術(shù)特性在內(nèi)的其他變量來提供不同的內(nèi)容、設計和交互。舉一個實際的例子，假設有一家比薩連鎖店，它有一個標準版的網(wǎng)站和一個手機版網(wǎng)站，手機版網(wǎng)站可以基于增強現(xiàn)實功能、用戶當前GPS位置找到附近的比薩店。單獨一個響應式設計遠遠不能支撐這種解決方案。然而，不是所有項目都要求如此完美。大多數(shù)情況下，根據(jù)視口大小為用戶提供與之匹配的視覺效果還是優(yōu)先選擇。例如，針對大多數(shù)網(wǎng)站，雖然從服務器端請求的內(nèi)容相同，但我們可以根據(jù)不同設備改變網(wǎng)頁的顯示方式。在小屏幕設備上，可能是將次要內(nèi)容放在主體內(nèi)容之下，或者最壞情況下將其直接隱藏；也可能是將導航按鈕改造成便于手指操作，而不是只提供一些需要精確瞄準才能點擊的玩意兒！字體大小也應該恰到好處，便于閱讀，不再需要不停地在屏幕上拖來拖去。同樣，在迎合小屏幕的同時，我們也不想降低筆記本和臺式機用戶的瀏覽體驗。既然我們意在兼容萬物，那給那些配備1900像素甚至更大屏幕的用戶提供一點額外改進又有何不可呢？簡而言之，我們需要那些能響應各種設備大小的完美設計。1.3響應式網(wǎng)頁設計的定義響應式網(wǎng)頁設計（RWD，ResponsiveWebDesign）這個術(shù)語，由伊?！ゑR科特（EthanMarcotte）提出。他在AListApart發(fā)表了一篇開創(chuàng)性的文章，將三種已有的開發(fā)技巧（彈性網(wǎng)格布局、彈性圖片、媒體和媒體查詢）整合起來，并命名為響應式網(wǎng)頁設計。這個術(shù)語還有一堆表示相同意思的其他叫法，如流式設計、彈性布局、塑料布局、流體設計、自適應布局、跨設備設計以及彈性設計。上面僅列舉了其中一部分！不過，正如馬科特等人所說，真正的響應式設計方法不僅僅只是根據(jù)視口大小改變網(wǎng)頁布局。相反，它是要從整體上顛覆我們當前設計網(wǎng)頁的方法。以往我們先是針對桌面電腦進行固定寬度設計，然后將其縮小并針對小屏幕進行內(nèi)容重排；現(xiàn)在我們應該首先針對小屏幕進行設計，然后逐步增強針對大屏幕的設計和內(nèi)容。一句話概括響應式網(wǎng)頁設計如果要用一句話概括響應式網(wǎng)頁設計，我覺得它是針對任意設備對網(wǎng)頁內(nèi)容進行完美布局的一種顯示機制。相反，如果需要根據(jù)不同設備提供特定的內(nèi)容和功能，那就需要一個真正的“手機版”網(wǎng)站。這種情況下，手機版網(wǎng)站會提供與桌面版網(wǎng)站完全不同的用戶體驗。1.4為什么要在響應式設計上停滯不前響應式網(wǎng)頁設計能夠根據(jù)視口變化控制頁面文檔流，但我們可以走得更遠。HTML5提供了比HMTL4更多且更加語義化的標簽。CSS3的媒體查詢是響應式設計不可或缺的組成部分，CSS3的其他功能給了我們前所未有的靈活性。我們將掙脫背景圖像和復雜的JavaScript代碼的羈絆，擁抱簡潔的CSS3漸變、投影、字體、動畫和變換。在使用HTML5和CSS3制作響應式網(wǎng)頁之前，讓我們先來欣賞一些值得學習的實例，看看哪些高手正在使用新潮的響應式HTML5和CSS3絕技創(chuàng)造奇跡，而我們可以從他們的開創(chuàng)性杰作中學到些什么。1.5響應式網(wǎng)頁設計示例若要全方位測試你自己或別人的響應式網(wǎng)站，則需要針對每一種設備和不同的屏幕尺寸，分別準備不同的測試系統(tǒng)。盡管這是最完美的辦法，但通過改變?yōu)g覽器窗口大小其實就可以完成大多數(shù)測試。除此之外，還有很多第三方插件和瀏覽器擴展可供選擇，通過它們可以將當前瀏覽器窗口或視口設定為指定像素。必要時，還可以自動將當前瀏覽器窗口或視口切換成為默認大?。ㄈ?024×768像素）。這樣你就可以輕松地測試不同屏幕視口尺寸下的網(wǎng)站效果。迷戀像素？忘了它吧！進入了響應式網(wǎng)頁設計的教堂，就不要再迷戀像素（px）這個度量單位，因為大多數(shù)情況下我們不會用像素，而會使用相對度量單位（em或百分比）。相對單位更方便我們審查其他響應式設計作品，查看設計的變更之處。1.5.1下載視口調(diào)試工具InternetExplorer用戶請下載安裝MicrosoftInternetExplorerDeveloperToolbar，下載地址如下：/download/en/details.aspx?id+18359如果你在使用Safari，雖然ResizeMe（/aaronholla/Safari_Extensions/ResizeMe.html）的功能類似且免費，但我最愛Resize（http://resizeS）。Firefox用戶請下載Firesizer（/en-US/firefox/addon/firesizer/），Chrome請下載WindowsResizer（/webstore/detail/kkelicaakdanhinjdeammmilcgefonfh）。不喜歡使用瀏覽器擴展？還有一個方法：我寫了個簡單HTML頁面來顯示瀏覽器窗口的當前視口高度和寬度。頁面用了jQuery框架，獲取當前的視口的高度和寬度并顯示出來。你可以在瀏覽器新標簽頁中打開這個頁面，調(diào)整窗口大小，然后切回你要測試的頁面查看效果。這個超級簡單的“Whatsizeismyviewportpage？”頁面地址如下：/easily-display-the-viewport-size-of-yourfor-responsive-designs/視口和屏幕尺寸視口和屏幕尺寸不是同一個概念。視口是指瀏覽器窗口內(nèi)的內(nèi)容區(qū)域，不包含工具欄、標簽欄等。也就是網(wǎng)頁實際顯示的區(qū)域。屏幕尺寸指的是設備的物理顯示區(qū)域。需要注意的是有些瀏覽器調(diào)整工具顯示的尺寸包含瀏覽器的其他元素，諸如地址欄、標簽欄和搜索欄，而有些工具則不是這樣。在下面的截圖中，實際的視口尺寸顯示在右上角（1156×921像素），同時Firesizer插件將窗口尺寸顯示在右下角（1171×1023像素）?，F(xiàn)在，我們帶著所有需要的工具，開始鑒賞最好的響應式網(wǎng)站。啟動你鐘愛的瀏覽器，打開瀏覽器調(diào)整工具，訪問/。如果你的視口寬度大于1060像素，你會看到如下圖所示的布局：如果你的視口寬度介于930像素到1060像素之間，你會看到如下圖所示布局：注意看logo旁邊的主導航菜單是如何變化的。主內(nèi)容區(qū)右側(cè)的圖標一個挨著一個排列，界面上的一切都合理可用，最重要的是，沒有一樣從屏幕上溢出?，F(xiàn)在讓我們再看看視口寬度小于880像素的效果，截圖如下：頭部的效果基本沒變，但注意右側(cè)的側(cè)邊欄還是變窄了一些。圖標排成了2行2列，同時文本塊做了適當調(diào)整，其中的文本流相應地發(fā)生變化。不過，將視口寬度減小到小于600像素，你就會發(fā)現(xiàn)一個重大的變化，如下圖所示：怎么樣？整個側(cè)邊欄對我們的新視口做出了響應，網(wǎng)站最重要的內(nèi)容區(qū)占據(jù)了整個瀏覽器窗口寬度。注意看頭部的導航鏈接現(xiàn)在是水平排列的，而不是被放在logo的旁邊。另外，logo本身的大小也做了調(diào)整。以上所有的這些變化有助于根據(jù)視口尺寸為用戶創(chuàng)建更好的體驗。讓我們來看看另一個例子：http://2011./。視口較寬時（大于1350像素）網(wǎng)站效果如下圖所示：請?zhí)貏e注意那9張圖的排列格式。當你減小視口寬度時（小于960像素），注意看界面發(fā)生了什么變化。三行三列的圖片排列方式變成了三行兩列外加下方一行三列，如下圖所示：繼續(xù)減小視口寬度，在小于720像素的時候我們會遇到另一個設計“斷點”。頭部導航鏈接轉(zhuǎn)換成了帶圖片的導航區(qū)域，這為觸屏導航提供了更好的操作區(qū)域：繼續(xù)減小視口寬度，當小于480像素時，圖片排列方式又變成了第一行2張圖片，第二行3張，第三行4張。這些圖片的大小在視口寬度縮小至大約300像素時又發(fā)生了變化。下面的截圖顯示了其在iPhone上的效果：1.5.2在線創(chuàng)意源泉推薦一個響應式設計創(chuàng)意收集網(wǎng)站：http://mediaqueri.es。雖然這里收集的網(wǎng)站并不是全部都采納完整的響應式方法論，即先針對小視口進行設計，然后逐步針對大視口進行漸進增強支持。但就目前來看，響應式設計方法興起的時間不長，再考慮到響應式網(wǎng)頁設計的各種可能性，這里確實有很多能讓我們汲取創(chuàng)意的范例。盡管調(diào)整視口大小來瀏覽網(wǎng)站能說明響應式網(wǎng)頁設計的理念，但這沒有展示出HTML5的優(yōu)勢。HTML5的優(yōu)勢事實上在幕后發(fā)揮。所以讓我們將注意力轉(zhuǎn)移到幕后，來了解一下HTML5的優(yōu)秀之處。1.6為什么HTML5很優(yōu)秀在創(chuàng)建可以通過W3C標準驗證的頁面時，HTML5強調(diào)簡化標簽，僅鏈接那些我們必須的CSS、JavaScript和圖片文件。智能手機用戶只能使用有限的帶寬訪問我們的頁面，而響應式設計的一個主要目標就是，網(wǎng)站不僅要對用戶有限的視口做出響應，還要以最快的時間加載網(wǎng)頁。雖然移除冗余的標簽元素只能節(jié)省一點字節(jié)，但積少成多！較之上一個版本的HTML（HTML4.0.1），HTML5進行了極大的改進，提供了許多新特性。前端開發(fā)工程師可能主要對HTML5的新語義元素感興趣，這些新元素給搜索引擎提供了含義更加豐富的代碼。HTML5也可以在表單提交等基本網(wǎng)頁交互場景中對用戶做出反饋，一般不再需要復雜的JavaScript表單處理流程。同樣，這為我們的響應式設計來帶來的好處就是，允許我們創(chuàng)建更加簡潔和快速的代碼。1.6.1省時省力HTML文檔的第一行都是使用Doctype（文檔類型聲明）開頭。老實說，這段代碼一般都是由代碼編輯器自動生成或者是從模板文件中粘貼過來的（沒人會真的手工敲出完整的HTML4.01文檔類型聲明吧？）。標準的HTML4.01網(wǎng)頁的文檔類型聲明如下所示：如今在HTML5中，則化繁為簡：如前所述，我寫頁面的時候從來不會手工敲出文檔類型聲明，我猜你也不會?！悄闳氯掳胩煊惺裁磳嶋H意義？不要著急，還得往頁面中鏈接JavaScript或CSS文件呢。在HTML4.01中，鏈接一個腳本文件的正確方法如下：HTML5中變得更簡單：如你所見，type屬性不再是必需的。鏈接CSS文件與此類似。HTML5也接受非常松散的語法。如，＜sCRiptSrC＝js/jquery-1.6.2.js＞＜/script＞和之前所舉例子一樣有效，盡管我們省略了腳本源文件地址兩邊的引號，而且標簽和屬性名大小寫字母混用，但HTML5并不介意，這樣的代碼照樣能夠通過W3C的HTML5驗證工具（/）的驗證。如果你在寫代碼時容易丟三落四，這或許是個好消息。如果你想從代碼中剔除每一個可能多余的字符，這點尤其有用。在代碼編寫方面還有很多細節(jié)可以讓我們的工作更加輕松從容，但我猜你一定期待HTML5更多的精彩內(nèi)容。那就讓我們來快速瀏覽一下HTML5新增的語義元素。1.6.2新增了語義化標簽元素制作標準的HTML頁面時，頭部和導航一般都是標配，如下所示：看看我們用HTML5如何實現(xiàn)：怎么樣？對于表示每個結(jié)構(gòu)化元素的毫無個性的＜div＞標簽（雖然為應用樣式加了class名），HTML5為我們提供了一些有語義的元素。頁面中的一些通用結(jié)構(gòu)體如頭部和導航（后面還會看到更多）有了獨立的標簽。使用＜nav＞標簽會使我們的代碼變得更有語義，如同告訴瀏覽器，“嘿，這塊內(nèi)容就是導航”。這對我們來說是件好事，但更重要的是對搜索引擎來也是件好事。搜素引擎能比以前更好地理解我們的網(wǎng)頁，并相應地評定網(wǎng)頁內(nèi)容。在編寫HTML頁面時，我經(jīng)常提醒自己，這些頁面在最終發(fā)布到互聯(lián)網(wǎng)上之前，將按流程交給負責后臺開發(fā)的同事（你懂的，就是那些使用PHP、Ruby、.NET、ColdFusion等等語言的帥哥們）。為了和后臺開發(fā)人員保持良好的協(xié)作關(guān)系，我通常都會給代碼中的＜/div＞結(jié)束標簽添加注釋，以確保其他人（也包括我自己）能夠輕松地確定＜div＞元素在哪里結(jié)束。HTML5可以讓我們省去大部分這樣的工作。查看HTML5代碼時，假如看到一個＜/header＞結(jié)束標簽，你會立即明白哪個標簽結(jié)束了，不用注釋。以上我們只窺見了HTML5語義增強的一斑。先別激動，我們還要認識一位朋友。如果沒有它，就沒有網(wǎng)頁設計的新時代，它就是CSS3。1.7CSS3為響應式設計和更多創(chuàng)新奠定了基礎(chǔ)如果你從20世紀90年代中期就開始從事網(wǎng)頁設計，應該記得當時所有的設計都基于表格布局。而且，樣式與內(nèi)容是交織在一起的。CSS（層疊樣式表）作為一種將設計與內(nèi)容分離的方法被引入。網(wǎng)頁設計師們花了一些時間才走進基于CSS設計的美麗新世界，諸如“CSS禪意花園”（）這樣的網(wǎng)站從視覺上形象地展示了基于CSS設計的網(wǎng)站所能達到的效果，為我們鋪平了前進的道路。從那以后，CSS成為了定義網(wǎng)頁表現(xiàn)層的標準方法，CSS2.1是當前正式批準的CSS標準。CSS3尚未被正式批準，但這并不意味著它的大部分內(nèi)容現(xiàn)在無法使用。W3C工作組的說明如下：CSS3是在CSS2基礎(chǔ)上按模塊構(gòu)建的，以CSS2.1標準為核心。每個模塊都會增加功能或是替換CSS2.1標準中已有章節(jié)。CSS工作組的設想是新的CSS模塊不會與CSS2.1標準沖突，這些模塊只會追加新功能，改進已有規(guī)定。大部分W3C標準草案讀起來（不可避免地）像法律條文。簡單來說，CSS3是一種附加模塊式構(gòu)造，而不是大一統(tǒng)的標準。由于CSS3以CSS2.1為核心，所以CSS2.1的功能照樣可以使用。不僅如此，某些相對成熟的CSS3模塊（并不是所有模塊都得到了相同程度的支持）今天也可以較為廣泛地使用了，因此不必等待整個規(guī)范得到批準。1.7.1底線：CSS3不破壞任何東西關(guān)于CSS3，最鼓舞人心的一點應該是在老版本瀏覽器中使用它們無法解析的屬性，不會造成任何問題。它們（包括InternetExplorer6、7、8）會欣然忽略那些無法解析的屬性。這使我們能夠為那些先進的瀏覽器進行漸進增強設計，同時為老版本瀏覽器提供合理的降級處理。1.7.2CSS3如何解決日常設計問題我們來看一個在大多數(shù)項目中都會遇到的設計問題——給界面元素創(chuàng)建圓角效果，可能是設計選項卡式界面，也可能是給諸如頭部這樣的塊狀元素應用圓角。在CSS2.1中可以使用滑動門技術(shù)（/articles/slidingdoors/）來實現(xiàn)，即將一張背景圖片放在另一張后面。對應的HTML代碼比較簡單：為了給＜a＞元素添加圓角背景，我們需要制作兩張圖片。第一張叫做headerLeft.png，15像素寬40像素高；第二張叫做headerRight.png，寬度要超過頭部可能設定的最大寬度（本例中寬度為280像素）。兩張圖片合起來組成滑動門。當元素寬度增加時（＜span＞標簽內(nèi)的文字增加），背景圖片會填滿背景空間，這樣就形成了一個普遍適用的圓角解決方案。下面是本例中的CSS代碼：GoogleChrome瀏覽器（v16）中的效果如下：上面的方法解決了設計問題，但卻需要增加一個多余的標簽（從語義上看＜span＞標簽沒有實際意義）和兩次額外的服務器端HTTP請求（兩張圖片）來創(chuàng)建屏幕上的視覺效果。除此之外，我們還可以使用CSS“雪碧”（Sprite）技術(shù)，將兩張圖片合成一張，然后使用background-position屬性來調(diào)整定位，雖然這樣還可以節(jié)省一點帶寬，但仍然不是一個靈活的方案。如果客戶要求圓角更大一點怎么辦？或者要求修改顏色怎么辦？我們必須得重新修改圖片。悲哀的是，作為前端設計師和工程師的我們，在CSS3出現(xiàn)以前，就身處這樣的窘境中。女士們先生們，我已經(jīng)看到了光明的未來，那是由CSS3塑造的未來！我們將上述的HTML代碼簡化成這樣：CSS代碼改為如下所示：下面的效果圖展示了在同樣的瀏覽器（Chromev16）中呈現(xiàn)的CSS3版的圓角按鈕效果：在上面的代碼中，先前的兩張圖片已被替換為一張沿x軸平鋪的1像素寬圖片。雖然圖片只有1像素寬，但高度仍然是40像素，比任何可能出現(xiàn)在其中的元素都高。在使用圖片作為元素背景時，一定要對其高度“高度注意”，以預防內(nèi)容溢出。不幸的是，這樣會產(chǎn)生更大的圖片，需要更多帶寬。盡管如此，和先前完全使用圖片的解決方案不同的是，CSS3提供了border-radius及其相關(guān)屬性來幫助我們設置圓角?？蛻粝胱寛A角更平滑一點，比如改成12像素？沒問題，只需要將border-radius的屬性值改為12px，搞定！CSS3的圓角屬性簡單、靈活，并且Safari（v3＋）、Firefox（v1＋）、Opera（v10.5＋）、Chrome（v3＋）和InternetExplorer9（及IE10）都支持它。微軟對IE9能夠支持這個屬性得意洋洋（我希望你能感受到我在此處所表達的一絲諷刺），他們甚至專門設計了一個交互頁面來演示使用border-radius屬性能達到的各種效果。演示頁面的地址如下：/testdrive/html5/borderradius/default.htmlCSS3可以更進一步，不再需要漸變背景圖片，而是使用瀏覽器渲染的效果。瀏覽器對這個特性的支持不是很好，但按照linear-gradient（yellow，blue）這個基本思路，任意元素的背景都可以用CSS3生成的漸變來渲染。漸變可以設定為純色，即傳統(tǒng)的HEX顏色值（如#BFBFBF）；也可以使用任何一種CSS3顏色模式（更多詳情請見第5章）。如果你想給老版本瀏覽器的用戶設置替換漸變的純色背景（否則他們看不到任何背景），如下所示的CSS代碼可以給不支持漸變的瀏覽器提供一個純色背景：linear-gradient屬性會指示瀏覽器從第一個顏色值（即例子中的#4fec50）開始，漸變至第二個顏色值（#42c264）。你可能注意到了，CSS代碼中的background-image：linear-gradient屬性使用不同前綴（例如-webkit-）重復了多次。這種寫法允許不同的瀏覽器（包括-moz-代表的MozillaFirefox，-ms-代表的MicrosoftInternetExplorer等）廠商在發(fā)布正式版本之前之前，試驗各自對CSS3新特性的實現(xiàn)，正式版本發(fā)布后就不再需要前綴。遵循樣式表的層疊特性，我們將無前綴的代碼放在最后，這樣如果該特性可用，則會覆蓋之前的聲明。1.8看吶，不用圖片下面的截圖展示了在同樣的瀏覽器中完全使用CSS3制作的按鈕效果：圖片版和純CSS版之間的視覺差異微不足道，我想這點你應該同意。相較于使用圖片，使用CSS3制作視覺效果能使我們的響應式設計更加簡潔。而且，現(xiàn)代瀏覽器都能很好地支持漸變，唯一需要權(quán)衡是那些對漸變支持不怎么到位的瀏覽器，如IE9以及更低版本的IE。CSS3還帶來了什么剛才，我們欣賞了一個CSS3能幫助我們完成的日常工作的小例子。接下來，我們想嘗嘗開胃大菜，看看CSS3能帶給我們什么美味。啟動Safari或Chrome，訪問/blog/。遺憾的是這個網(wǎng)頁不是響應式設計，我們關(guān)心的區(qū)域是頁面上方的那一排記事貼。把鼠標懸停在上面就可以看到它們浮起來。很帥吧？過去，這種增強效果一般都要靠笨重的Flash或者JavaScript實現(xiàn)。而現(xiàn)在則可以完全通過CSS3的變換來實現(xiàn)。使用CSS3制作動畫比JavaScript或Flash更輕量級，更好維護，因此對響應式設計來說很理想。支持該特性的瀏覽器會顯示效果，不支持的則裝傻跳過，僅將其看做一張靜態(tài)圖片而已。另一個優(yōu)秀的CSS3動畫范例是/3d_animation_css3。這個網(wǎng)站也不是響應式設計，但我們只關(guān)心其中用到的CSS技巧。先在InternetExplorer9或者Firefox中看看（9.0版本以前，F(xiàn)irefox還不支持該CSS3模塊），然后在Safari5＋或者Chrome16＋中看看效果。下面的截圖效果未盡其意，如果你不準備親自欣賞，那你得相信我的話——確實很贊：酷炫的效果不僅僅只是Webkit核心的Safari和Chrome瀏覽器的專利。下面的例子在Firefox中也很炫，而且也是純CSS3實現(xiàn)的：/examples/dynamic_stack_of_index_cards/。顯然，這些效果不是每個網(wǎng)站都必需的。它們是“漸進增強”的完美印證。在不支持特殊效果的瀏覽器里，用戶只會看到靜態(tài)的圖片。但使用現(xiàn)代瀏覽器的用戶則可以享受增強的視覺效果。雖然支持CSS33D變換的瀏覽器非常有限，但支持諸如文字陰影、漸變、圓角、RGBA顏色和多重背景圖片等CSS3效果的瀏覽器則非常多，這為解決常年來令我們撓頭的設計問題提供了靈活的方法。1.9HTML5和CSS3現(xiàn)在就能用嗎任何工具或技術(shù)都應該只在應用程序需要它的時候使用。做為前端工程師/設計師，我們的項目往往因為財務預算而受到時間和資源上的限制。InternetExplorer7和8都不支持HTML5新的語義元素，也不支持CSS3的新屬性。如果一個網(wǎng)站的絕大多數(shù)用戶都使用InternetExplorer7或8，那花費精力將其做成基于HTML5和CSS3的響應式設計沒有太大意義。但這并不意味著我們做不到。第9章在討論跨瀏覽器響應問題時，會介紹一些剛剛涌現(xiàn)的新工具（因為它們是用于修補舊瀏覽器缺陷的，所以也被稱為polyfill），用來修補那些不支持現(xiàn)代瀏覽器特性的老舊瀏覽器（主要是老舊的IE），但最好是從一開始就采取切實可行的方法來實現(xiàn)響應式設計。以我的經(jīng)驗，一開始通常會問自己以下問題?？蛻羰欠裣胫С只ヂ?lián)網(wǎng)用戶增長最迅猛的市場？如果想，那響應式方法就很適合?？蛻羰欠裣胍詈啙?、快速，且易于維護的代碼？如果想，那響應式方法就很適合?？蛻裟芊窭斫庥脩趔w驗可以且本應該根據(jù)瀏覽器不同而不同？如果可以理解，那響應式方法就很適合。客戶是否要求設計效果在所有瀏覽器中都保持一致，包括IE8以及更低版本？如果是，響應式設計就不適合。該網(wǎng)站的當前或預期客戶中，是否有百分之七十以上的人可能使用InternetExplorer8或者更低版本？如果是，則響應式設計不適合。再次重申，在預算允許的情況下，一個完全定制的“移動”版網(wǎng)站比響應式設計更適合。澄清一下，我將那些完全專注移動平臺、為移動設備用戶提供不同內(nèi)容/體驗的解決方案稱之為“移動網(wǎng)站”。提倡響應式設計方法的人，不會都認為響應式設計在任何情況下都可以替代“移動網(wǎng)站”。1.10響應式網(wǎng)頁設計不是靈丹妙藥雖然有點“爹爹給婆婆拜年——多此一舉”，但還是有必要再重申一遍：使用HTML5和CSS3的響應式網(wǎng)頁設計不是解決所有設計和內(nèi)容服務問題的靈丹妙藥。和以往的網(wǎng)頁設計一樣，項目的具體情況（即預算、目標用戶以及網(wǎng)站用途）決定了其實現(xiàn)方式。根據(jù)我的經(jīng)驗，如果預算有限或開發(fā)一個完全定制的“移動網(wǎng)站”不太可行，那么響應式網(wǎng)頁設計較之標準的固定寬度設計，總能提供更好的和無歧視的用戶體驗。1.11引導客戶：網(wǎng)站不必在所有瀏覽器中表現(xiàn)一致著手響應式設計之前，要跨越的最后一道障礙往往是思維定式。而且在某些情況下，這或許是最難克服的問題。例如，我經(jīng)常被要求將已有的平面設計轉(zhuǎn)換成使用HTML/CSS和jQuery構(gòu)造的標準網(wǎng)頁。依我的經(jīng)驗，平面設計師在創(chuàng)作設計圖時，通常只會考慮固定寬度“桌面版”網(wǎng)站，考慮得更多的設計師真是罕有（我說罕有，意思是從來沒見過）。接著我的職責就是在所有瀏覽器中以像素級別還原該設計。這項任務的最終成敗取決于客戶以及平面設計師的眼光。這種想法在有平面印刷設計背景的客戶那里更是根深蒂固。他們的想法很好理解：客戶簽字認同了設計圖，然后將其交給你、我這樣的前端設計師/工程師，之后我們投入時間來確保最終代碼在所有主流瀏覽器中的顯示效果與原始設計盡可能接近——客戶所見就是客戶所得。如果你嘗試過讓一個現(xiàn)代網(wǎng)頁設計在InternetExplorer6、7中，和在Safari、Firefox或Chrome等現(xiàn)代瀏覽器中的表現(xiàn)完全一致，你就會知道什么叫“蜀道之難，難于上青天”了。我經(jīng)常會用整個項目近百分之三十的時間/預算來修復這些爛瀏覽器的固有缺陷和不足。這些時間應該用來為越來越多的現(xiàn)代瀏覽器用戶開發(fā)增強體驗或優(yōu)化代碼，而不應該浪費在為越來越少的InternetExplorer用戶修補代碼，絞盡腦汁地生造出圓角、透明圖片、正確對齊的表單元素等效果。遺憾的是，解決這個問題的唯一方法就是說服引導。客戶需要明白為什么應該支持響應式設計，響應式設計的結(jié)果如何，為何最終設計不會也不應在所有視口和瀏覽器中表現(xiàn)一致。有些客戶能理解，有些則不能。悲劇的是，有些客戶仍然堅持要求在InternetExplorer6中也要有一模一樣的圓角和投影效果。當我接手一個新項目時，不論響應式設計是否適合，我都會試著給客戶說明以下幾點。允許頁面顯示效果在老舊瀏覽器中有細微的差別，這樣可以使代碼更易維護，將來更新的成本也更低。讓頁面元素在那些老舊瀏覽器（如InternetExplorer8及更低版本）中表現(xiàn)一致會導致網(wǎng)站增加大量的圖片。這會使網(wǎng)站變慢，制作成本變高，而且更難維護?，F(xiàn)代瀏覽器可以理解的簡潔代碼等同于更快速的網(wǎng)站?？焖夙憫木W(wǎng)站在搜索引擎中的評級高于慢騰騰的網(wǎng)站。使用老舊瀏覽器的用戶越來越少，使用現(xiàn)代瀏覽器的用戶越來越多——我們應該支持大多數(shù)！最重要的一點，支持現(xiàn)代瀏覽器，你就能盡情地享受響應式網(wǎng)頁設計，它能響應不同設備的不同瀏覽器視口。1.12小結(jié)本章，我們介紹了什么是響應式設計，并且欣賞了已有的優(yōu)秀響應式設計范例。這些設計都是使用我們將在本書中講解的工具和技術(shù)構(gòu)建的。我們也已認同，以桌面電腦為中心的設計思想，應該轉(zhuǎn)變成為未知設備而設計的思想。首先為最小的可視區(qū)域設計版式，然后在此基礎(chǔ)上漸進增強用戶體驗。通過了解新的HTML5規(guī)范，我們確定HTML5的大部分內(nèi)容可用，而且能夠發(fā)揮其優(yōu)勢。換句話說，新的語義標簽允許我們使用更簡潔的代碼創(chuàng)建比以往更具語義的網(wǎng)頁。實現(xiàn)響應式設計的關(guān)鍵技術(shù)是CSS3。在使用CSS3添加漸變、圓角、文字陰影和動畫等視覺效果之前，首先要讓它來扮演一個更重要的角色，那就是利用CSS3的媒體查詢，針對特定的視口設置特定的CSS規(guī)則。下一章我們將開始“響應式網(wǎng)頁設計”的探索之旅?！咀⑨尅?/p>

\h(1)一種游戲，詳見/wiki/Tiddlywinks。2媒體查詢：支持不同的視口如上一章所述，CSS3是由很多附加模塊組合而成的。媒體查詢就是其中的一個模塊。媒體查詢可以讓我們根據(jù)設備顯示器的特性為其設定CSS樣式。例如，我們僅使用幾行代碼，就可以根據(jù)諸如視口寬度、屏幕比例、設備方向（橫向或縱向）等特性來改變頁面內(nèi)容的顯示方式。本章內(nèi)容理解為什么響應式設計需要媒體查詢?nèi)绾螛?gòu)造CSS3媒體查詢我們能夠檢測哪些設備特性編寫第一個CSS3媒體查詢?yōu)樘囟ㄒ暱谠O定CSS樣式如何在iOS和Android設備上使用媒體查詢2.1現(xiàn)在就能使用媒體查詢媒體查詢已經(jīng)被廣泛使用，而且也被瀏覽器廣泛支持（如Firefox3.6＋、Safari4＋、Chrome4＋、Opera9.5＋、iOSSafari3.2＋、OperaMobile10＋、Android2.1＋和InternetExplorer9＋）。此外，要對老版本瀏覽器如InternetExplorer6、7和8實現(xiàn)兼容修復（雖然基于JavaScript）也很容易。如果你現(xiàn)在想對InternetExplorer6、7和8進行兼容修復，可以查閱第9章關(guān)于解決跨瀏覽器響應問題的內(nèi)容?？傊瑳]有什么理由能阻礙我們現(xiàn)在使用媒體查詢。W3C對規(guī)范有一套完整的審批流程（如果你有空，可以去看看該流程的官方說明，地址：/2005/10/Process-20051014/tr），從工作草案（WorkingDraft，WD），到候選推薦標準（CandidateRecommendation，CR），再到提議推薦標準（ProposedRecommendation，PR），幾年之后，才能成為W3C推薦標準（REC）。所以那些相對成熟的模塊使用起來比較安全。比如，CSS3變換模塊Level3（/TR/css3-3d-transforms/）從2009年3月起一直處于工作草案狀態(tài)，相對于候選推薦標準的媒體查詢模塊，瀏覽器支持遠遠不足。2.2為什么響應式設計需要媒體查詢沒有CSS3的媒體查詢模塊，就不能針對設備特性（如視口寬度）設置特定的CSS樣式。如果你仔細研讀W3C關(guān)于CSS3媒體查詢模塊的規(guī)范，就會看到媒體查詢的官方解釋：HTML4和CSS2目前支持為不同的媒體類型設定專有的樣式表。比如，一個頁面在屏幕上顯示時使用無襯線字體，而在打印時則使用襯線字體。screen和print是兩種已定義的媒體類型。媒體查詢讓樣式表有更強的針對性，擴展了媒體類型的功能。媒體查詢由媒體類型和一個或多個檢測媒體特性的條件表達式組成。媒體查詢中可用于檢測的媒體特性有width、height和color（等）。使用媒體查詢，可以在不改變頁面內(nèi)容的情況下，為特定的一些輸出設備定制顯示效果。2.2.1媒體查詢語法CSS媒體查詢到底長什么樣，更重要的是，它是怎么起作用的？將下面這段代碼插入到任意某個CSS文件的最后，然后預覽與之關(guān)聯(lián)的網(wǎng)頁：在現(xiàn)代瀏覽器（如果是IE，至少要IE9）中瀏覽該網(wǎng)頁并不斷調(diào)整瀏覽器窗口寬度。頁面的背景顏色就會根據(jù)當前的視口尺寸而發(fā)生變化。為了清晰起見，我在這里使用了顏色名稱，但實際上最好使用十六進制顏色值，如#ffffff。接下來，讓我們繼續(xù)分析媒體查詢，學習如何對其進行充分利用。如果經(jīng)常使用CSS2樣式表，你就知道可以通過＜link＞標簽的media屬性為樣式表指定設備類型（如顯示屏或打印機）。具體說來，就是在HTML頁面的＜head＞標簽中插入一個如下面代碼片段所示的link標簽：媒體查詢則能使我們根據(jù)設備的各種功能特性來設定相應的樣式，而不僅僅只針對設備類型。可以將媒體查詢想象成對瀏覽器的提問。如果瀏覽器回答“是”，則應用樣式；如果回答是“否”，則不應用樣式。相對于在CSS2中能且只能問瀏覽器“你是一塊顯示屏嗎？”，媒體查詢能問的問題要多一點。例如，媒體查詢可以問：“你是一塊縱向放置的顯示屏嗎？”我們看看對應的實際代碼：首先，媒體查詢表達式詢問了媒體類型（你是一塊顯示屏嗎？），然后詢問了媒體特性（顯示屏是縱向放置的嗎？）。任何縱向放置的顯示屏設備都會加載portrait-screen.css樣式表，其他設備則會忽略該文件。在媒體查詢的開頭追加not則會顛倒該查詢的邏輯。例如，下面的代碼就會顛倒前例中的效果，會使非縱向放置的顯示屏設備加載樣式文件：也可以將多個表達式組合在一起。如，我們擴展一下前面的例子，限制只有視口寬度大于800像素的顯示屏設備才能加載文件。更進一步，還可以寫一個媒體查詢列表。查詢列表中的任意一個查詢?yōu)檎?，則加載文件。全部查詢都不為真，則不加載。例子如下：這里有兩點需要注意。第一，媒體查詢之間使用逗號分隔。第二，你會注意到在projection之后，沒有and，也沒有任何特性/值的組合。沒有后續(xù)表達式，意味著只要是projection就滿足條件。本例中，樣式會應用于所有的投影儀。和以前編寫CSS規(guī)則一樣，基于媒體查詢也可以按條件加載樣式。在上面的例子中，我們在向頁面的＜head＞＜/head＞標簽中鏈接CSS文件時使用了媒體查詢。除此之外，我們還可以在CSS樣式表中使用媒體查詢。例如，將下面的代碼插入樣式表，在屏幕寬度小于等于400像素的設備上，h1元素的文字顏色就會變成綠色。還可以使用CSS的@import指令在當前樣式表中按條件引入其他樣式表。例如下面的代碼會給視口最大寬度為360像素的顯示屏設備加載一個名為phone.css的樣式表。切記，使用CSS的@import方式會增加HTTP請求（這會影響加載速度），所以請謹慎使用該方法。2.2.2媒體查詢能檢測那些特性創(chuàng)建媒體查詢時，最常用的是設備的視口寬度（width）和屏幕寬度（device-width）。依我的經(jīng)驗，很少需要檢測其他特性。但是，為方便查閱，下面列出了所有可供媒體查詢檢測的特性，希望其中有能讓你心動的特性。width：視口寬度。height：視口高度。device-width：渲染表面的寬度（對我們來說，就是設備屏幕的寬度）。device-height：渲染表面的高度（對我們來說，就是設備屏幕的高度）。orientation：檢查設備處于橫向還是縱向。aspect-ratio：基于視口寬度和高度的寬高比。一個16∶9比例的顯示屏可以這樣定義aspect-ratio：16/9。device-aspect-ratio：和aspect-ratio類似，基于設備渲染平面寬度和高度的寬高比。color：每種顏色的位數(shù)。例如min-color：16會檢測設備是否擁有16位顏色。color-index：設備的顏色索引表中的顏色數(shù)。值必須是非負整數(shù)。monochrome：檢測單色幀緩沖區(qū)中每像素所使用的位數(shù)。值必須是非負整數(shù)，如monochrome：2。resolution：用來檢測屏幕或打印機的分辨率，如min-resolution：300dpi。還可以接受每厘米像素點數(shù)的度量值，如min-resolution：118dpcm。scan：電視機的掃描方式，值可設為progressive（逐行掃描）或interlace（隔行掃描）。如720pHD電視（720p的p即表明是逐行掃描）匹配scan：progressive，而1080iHD電視（1080i中的i表明是隔行掃描）匹配scan：interlace。grid：用來檢測輸出設備是網(wǎng)格設備還是位圖設備。在上述所有特性中，除scan和grid之外，都可使用min和max前綴來創(chuàng)建一個查詢范圍。例如，分析如下所示的代碼片段：這里對width應用了min和max來設定查詢范圍。這樣phone.css文件只會引入視口寬度介于200像素至360像素的顯示屏設備。2.2.3用媒體查詢改造我們的設計毫無疑問，你肯定知道CSS代表層疊樣式表。所謂層疊，就是指樣式表中后面的樣式會覆蓋前面相同的樣式（除非前面的樣式具有更高的針對性）。因此我們可以在樣式表的開頭設置基本樣式，以便適應所有設計，然后使用媒體查詢來進一步重寫相應的部分。例如，先針對大視口設計（用戶大多數(shù)情況下使用鼠標），將導航鏈接設計成簡單的文字鏈接；然后再針對較小的視口，使用媒體查詢重寫這部分樣式，為拇指一族提供更大的點擊區(qū)域。2.2.4加載媒體查詢的最佳方法現(xiàn)代瀏覽器雖然可以智能地忽略與自身不匹配的樣式文件，但它卻不一定不下載這些文件。因此，將不同媒體查詢的樣式保存到獨立的文件中沒有太大好處（個人喜好或為便于組織代碼除外）。使用多個獨立的文件會增加用于頁面渲染的HTTP請求數(shù)量，從而導致頁面加載變慢。Respond.js（/scottjehl/Respond）是為InternetExplorer8及更低版本增加媒體查詢支持的最快的JavaScript工具，但它目前無法解析CSS的@import命令。因此，建議在已有的樣式表中追加媒體查詢樣式。使用如下語法即可在已有樣式表中加入媒體查詢：2.3我們的第一個響應式設計不知道你此刻怎么想，但我熱切地渴望開始設計一個響應式網(wǎng)頁！我們已經(jīng)理解了媒體查詢的原理，那就讓我們試著駕馭它們，看看它們在實際工作中如何發(fā)揮作用。而且我正好有用來測試的項目。下面請允許我說點題外話……我喜歡電影。但是，我常常發(fā)現(xiàn)自己和別人的觀點不同（或許這就是我日復一日獨居一室寫代碼的原因之一），尤其是關(guān)于什么是好電影什么是爛電影。每當奧斯卡獎提名宣布的時候，我經(jīng)常會有一種強烈的惡心反胃感。我總覺得各種類型的電影都應獲得嘉獎。我打算自己弄一個名叫Andthewinnerisn’t的小網(wǎng)站，網(wǎng)址是/。這里會褒獎那些本應獲獎的電影，批評那些（不該獲獎卻）獲獎的電影，這里還有視頻剪輯、經(jīng)典語錄、電影海報，以及能證明我沒錯的在線調(diào)查（我知道沒必要，但我喜歡）。2.3.1我們的設計是固定寬度的，不要驚訝和我以前罵過的那些從不考慮不同視口的平面設計師一樣，我開始也基于960像素的固定寬度網(wǎng)格制作一個界面原型。雖然理論上最好是從移動（小屏幕）設備的體驗出發(fā)開始設計，然后漸進增強，但實際上要讓每個人都理解這種思路的好處恐怕還需幾年時間。在此之前，更多的可能是要將現(xiàn)有的桌面版網(wǎng)頁設計改造成響應式的。既然未來幾年我們可能都會這樣做，那我們的設計還要從固定寬度著手。下面的截圖展示了一個粗略的固定寬度的界面原型：將這個設計分解，可以看到它有幾個簡單通用的結(jié)構(gòu)：頭部、導航、邊欄、內(nèi)容區(qū)和頁腳?？峙履忝恐芏紩?gòu)建一遍類似的結(jié)構(gòu)吧。第4章會告訴你為什么應該使用HTML5標簽。不過此時我將略過這點，因為我們想急切地檢驗剛講的媒體查詢技巧。所以我們將使用舊的HTML4標簽來進行我們的第一次媒體查詢試驗。使用HTML4標簽編寫的沒有實際內(nèi)容的基本頁面結(jié)構(gòu)如下所示：用Photoshop打開設計文檔，我們可以看到頭部和頁腳都是940像素寬（兩邊各有10像素外邊距），而側(cè)邊欄和內(nèi)容區(qū)分別占據(jù)了220像素和700像素，相應地兩邊也各自有10像素的外邊距。首先，我們要在CSS中給頁面主要的結(jié)構(gòu)模塊（頭部、導航、側(cè)邊欄、內(nèi)容區(qū)和頁腳）設置一下樣式。在插入重置樣式之后，頁面的主體CSS代碼應該如下所示：為了說明頁面的結(jié)構(gòu)，我在給各個結(jié)構(gòu)模塊追加額外內(nèi)容的同時，還為各個結(jié)構(gòu)模塊設置了不同的背景顏色。重置樣式就是一組CSS聲明，用來覆蓋不同瀏覽器渲染HTML元素時的各種默認樣式。重置樣式一般會被加入到主樣式文件的開頭，用來將各個瀏覽器的自有默認樣式重置成統(tǒng)一表現(xiàn)，確保樣式表中后續(xù)追加的樣式在不同瀏覽器中有相同的顯示效果。世界上沒有完美的重置樣式，許多開發(fā)者都有自己的一套。我在HTML4頁面中使用的重置樣式，是在EricMeyer的原版（/eric/tools/css/reset/）基礎(chǔ)上加上了我的一些個人偏好及技巧，這些技巧是我從另外一些天才如DanCederholm（）的代碼里學來的。如果你現(xiàn)在還沒用過重置樣式，那么強烈建議在你的HTML4文檔開頭插入Eric的重置樣式。我覺得針對HTML5文檔有更好的選擇，如normalize.css（/normalize.css/），第4章會詳細介紹。在一個視口大于960像素的瀏覽器中，頁面的基本結(jié)構(gòu)應如下所示：還有好幾種使用CSS制作同樣效果的固定寬度左右分欄結(jié)構(gòu)的方法，你肯定有自己偏愛的方法。不過這些方法都普遍存在一個問題，當視口縮減到小于960像素的時候，右側(cè)的內(nèi)容區(qū)就開始被截斷。2.3.2響應式設計中要保證圖片盡可能精簡為了說明上述代碼結(jié)構(gòu)的問題，我已經(jīng)提前參照設計圖在CSS中增加了一些裝飾性樣式。既然要做響應式設計，那我肯定會用最精簡的辦法來切取背景圖片。例如，對于設計圖頂部和底部的小彩旗，我不會制作一個長條圖片，而只是切取其中的兩面小旗。這個切片作為背景圖在視口中水平重復，從而給人一種長條旗幟圖片的錯覺（不論視口有多寬都行）。這種方法為兩處背景分別節(jié)省了16KB（960像素寬的.png長條旗幟圖一張20KB，而精簡的切片圖只有4KB）。這樣你就為通過手機上網(wǎng)的用戶節(jié)省了一部分流量！下圖展示了這個切片圖輸出前的樣子（放大到了600%）：在背景圖片和文字大小都設置停當之后，Andthewinnerisn’t…網(wǎng)站在瀏覽器中的效果如下所示：要讓樣式完美，還有很多工作要做。例如，導航按鈕顏色應該交替使用紅色和黑色，缺少內(nèi)容區(qū)的THESESHOULDHAVEWON按鈕和側(cè)邊欄的fullinfo按鈕，字體與設計圖效果相去甚遠。不過，所有這些問題都可以使用HTML5和CSS3來解決。使用HTML5和CSS3，而不再是簡單插入圖片（如我們以前做過的那樣），會使網(wǎng)站與我們的響應式目標步調(diào)一致。時刻謹記，我們要保證代碼和數(shù)據(jù)都盡可能精簡，以便為帶寬有限的用戶提供愉悅的體驗。2.3.3小視口下的內(nèi)容剪切現(xiàn)在，我們把美學問題放在一邊，重點關(guān)注一下當視口縮減至小于960像素的情況，此時正在制作的首頁中會有一部分內(nèi)容被切掉。這還只是將視口縮減到673像素寬，想象一下網(wǎng)站在iPhone3GS等設備上將會有多難看？iPhone3GS的顯示屏大小只有320×480像素?？纯聪旅娴男Ч麍D：咦，等等，這效果看著挺好，或者說還行……剛才你還說會難看的！這是因為iOS上的Safari瀏覽器默認是在980像素寬的畫布上渲染頁面，然后將畫布縮小到與視口大小匹配。雖然得放大頁面才能看清楚，但頁面內(nèi)容沒有被切掉。怎么阻止Safari或其他移動瀏覽器做這樣的默認處理呢？2.4阻止移動瀏覽器自動調(diào)整頁面大小iOS和Android瀏覽器都基于WebKit（/）核心。這兩種瀏覽器以及很多其他瀏覽器（如OperaMobile），都支持用viewportmeta元素覆蓋默認的畫布縮放設置。只需要在HTML的＜head＞標簽中插入一個＜meta＞標簽。＜meta＞標簽中可以設置具體的寬度（如像素值）或者縮放比例如2.0（設備實際尺寸的兩倍）。下面是一個將頁面放大到設備實際尺寸兩倍顯示的meta標簽的示例：將這個''標簽插入到我們的HTML中，如下面的代碼所示：然后，在Android中加載該頁面，顯示效果如下所示：如你所見，這并不是我們最終想要的效果，但這個夸張的效果說明了我們討論的問題。安裝iOS模擬器和Android模擬器雖然真機測試無可替代，但還是可以使用Android和iOS模擬器。Windows、Linux和Mac版的Android模擬器都可以免費下載，Android軟件開發(fā)工具包（SDK）也可以免費安裝。下載地址是/sdk/。不過得使用命令行安裝，需要你有一顆勇敢的心\h(1)。iOS模擬器是Xcode開發(fā)包（在MacAppStore中免費下載）的一部分，只能在MacOSX上使用。一旦安裝了Xcode，你就可以在這個路徑下找到模擬器：～/Developer/Platforms/iPhoneSimulator.platform/Developer/ApplicationsiOSSimulator.app我們來分析一下上面所示的＜meta＞標簽，以理解它的工作原理。name＝"viewport"屬性不言而喻。content＝"initial-scale＝2.0的意思是將頁面放大兩倍（同理，0.5表示縮小一半，3.0表示放大3倍），同時width＝device-width告訴瀏覽器頁面的寬度應該等于設備寬度。＜meta＞標簽還可以控制頁面可縮放的范圍。下面的代碼允許用戶將頁面最多放大至設備寬度的3倍，最小壓縮至設備寬度的一半。你還可以禁止用戶縮放，不過縮放是一個重要的輔助功能，所以在實踐中很少禁用。user-scalable＝no即是禁止縮放?，F(xiàn)在，我們將縮放比例設置為1.0，這表示瀏覽器將按照其視口的實際大小來渲染頁面。將寬度設置為設備寬度，意味著支持該特性的瀏覽器都將會按照設備寬度的實際大小來渲染頁面。下面是我們最終將要使用的＜meta＞標簽：在豎直的iPad上瀏覽頁面，可以看到還是有一部分內(nèi)容被剪切掉了，但已經(jīng)不再是縮小版的頁面了！這就是本節(jié)想要達到的目的。相信我，這是個進步！鑒于viewportmeta標簽的使用越來越普遍，W3C正嘗試通過CSS引入同樣的功能?？梢栽L問/csswg/css-device-adapt/，了解新的@viewport聲明?；舅悸肥遣挥迷冢糷ead＞標簽中添加＜meta＞標簽了，而是可以在CSS中編寫@viewport{width：320px；}聲明，同樣可以將瀏覽器視口寬度設置為320像素。有些瀏覽器已經(jīng)支持這種語法（如OperaMobile），不過要使用私有前綴，如@-o-viewport{width：320px；}。2.5針對不同視口寬度修正設計設置viewportmeta標簽后，任何瀏覽器都不再縮放頁面了，現(xiàn)在我們可以針對不同視口來修正設計效果。首先在CSS中為平板設備（如iPad）增加媒體查詢，豎直iPad的視口寬度是768像素（橫向視口寬度是1024像素，此時頁面渲染效果很理想）。媒體查詢針對視口寬度不大于768像素的情況，重新調(diào)整了外殼、頭部、頁腳以及導航等頁面元素的寬度。下圖展示了此時頁面在iPad上的效果：上圖的效果讓我很受鼓舞。頁面內(nèi)容沒再被剪切，而是與iPad屏幕（或者其他視口不超過768像素的設備）恰好匹配。但還得解決導航區(qū)鏈接超出背景圖和主內(nèi)容區(qū)浮動在側(cè)邊欄之下（因為內(nèi)容區(qū)太寬，在有限的空間內(nèi)放不下）這兩個問題。我們再修改一下CSS中的媒體查詢，代碼片段如下所示：現(xiàn)在，側(cè)邊欄和內(nèi)容區(qū)填滿了頁面，且兩邊各留有適當?shù)膬?nèi)邊距。但這樣的效果并不引人注目。我想把內(nèi)容放在前面，把側(cè)邊欄放在后面（側(cè)邊欄的重要程度一般不高）。如果說我正在嘗試制作一個真正的響應式設計，那在此處我又犯了一個低級錯誤。2.6響應式設計中內(nèi)容始終優(yōu)先我們想讓設計在多平臺多視口的情況下保留盡可能多的內(nèi)容（而不是使用display：none或類似方法來隱藏部分內(nèi)容），但也要意識到內(nèi)容模塊顯示順序的重要性。目前，頁面中側(cè)邊欄和主內(nèi)容區(qū)標簽的順序決定了側(cè)邊欄會顯示在主內(nèi)容區(qū)前面。顯然，窄視口設備的用戶應該先看到主內(nèi)容，而后再看到側(cè)邊欄。我們還可以（或許應該）將內(nèi)容區(qū)移到導航區(qū)域之上。這樣那些使用小視口設備的用戶就可以先看到主內(nèi)容。這樣無疑是堅決貫徹“內(nèi)容優(yōu)先”原則的合理做法。但是，多數(shù)情況下每個頁面頂部還是應該有導航區(qū)，所以我樂得只將HTML代碼中的側(cè)邊欄和內(nèi)容區(qū)位置互換一下，讓內(nèi)容區(qū)出現(xiàn)在側(cè)邊欄之前。當前代碼結(jié)構(gòu)如下：互換位置后的代碼如下：雖然我們互換了標簽位置，但頁面在大視口中的顯示效果沒有變化，因為側(cè)邊欄和內(nèi)容區(qū)分別使用了float：left和float：right屬性。但是在iPad上，則變成了首先顯示內(nèi)容區(qū)，下面才是側(cè)邊欄。在調(diào)整好標簽結(jié)構(gòu)的順序之后，我還著手為768像素寬的視口追加并替換了一些樣式?，F(xiàn)在最新的媒體查詢代碼如下所示：此處添加的代碼只會對視口等于或小于768像素的顯示屏設備起作用。視口更寬的設備會忽略這些代碼。另外，因為這些樣式放在文件的末尾，所以會覆蓋之前的重名樣式。結(jié)果就是視口大的設備上沒有什么變化，而視口寬度為768像素的設備上最終的效果如下所示：不消說，我們沒準備拿什么設計大獎。但僅通過幾行CSS媒體查詢代碼，就為不同的視口做出一個完全不同的布局來，這還是挺牛的。這些代碼都是什么意思呢？首先，使用媒體查詢將所有內(nèi)容區(qū)寬度置為全屏：然后是一些美化頁面元素及布局的樣式。例如，如下代碼片段改變了導航區(qū)大小、布局以及背景，這樣平板用戶可以更方便地選擇導航條目：現(xiàn)在，同樣的內(nèi)容可以根據(jù)視口大小以不同的布局來顯示了。媒體查詢很贊，不是嗎？太值得慶祝一下了。當你開香檳的時候，我用iPhone看了看頁面的效果……如下圖所示：2.7媒體查詢只是必要條件之一我們回顧一下的前面所講的內(nèi)容。很顯然我們的工作還遠未結(jié)束，網(wǎng)站在iPhone的320像素寬的小視口中顯示得很糟糕。媒體查詢盡其所能，根據(jù)設備特性應用了對應的樣式。但問題是，現(xiàn)有的媒體查詢只覆蓋了小范圍的視口。視口寬度小于768像素的設備都將看到內(nèi)容被剪切，而視口介于768像素到960像素之間的設備，則會使用未受媒體查詢樣式影響的原有樣式，結(jié)果我們已經(jīng)知道了，一旦視口寬度小于960像素，頁面就無法匹配（作者抱頭長嘆）。我們需要流動布局如果針對已知的特定訪問設備，可以單獨使用媒體查詢來制作理想的設計效果，我們已經(jīng)見過專門適配iPad有多簡單。但是這種策略有嚴重的缺陷，換句話說，它不能適應未來的變化。目前的情形是，頁面捕捉到媒體查詢設置的斷點，然后布局發(fā)生變化。但在捕捉到下一個視口斷點之前，頁面靜止不變。我們需要比這更好的策略。針對各種視口的排列組合編寫對應的CSS樣式，無法兼容未來可能出現(xiàn)的設備；而一個完美的設計，往往能在一定程度上適應未來的發(fā)展。在這點上我們目前的解決方案尚不完備。目前的效果更像是一個自適應設計，而不是我們想要的真正的響應式設計。我們的設計應該在突變之前保持靈動。要做到這點，需要將呆板的固定布局修改成靈活的流動布局。2.8小結(jié)本章我們學習了什么是CSS3媒體查詢，如何在CSS文件中引入媒體查詢，以及如何使用媒體查詢來制作響應式網(wǎng)頁。討論了如何讓移動瀏覽器像桌面版瀏覽器一樣渲染我們的頁面，另外還談到了在編寫頁面標簽時要遵守“內(nèi)容優(yōu)先”的原則。此外還學習了在設計中使用圖片時如何保證盡可能精簡。然而，我們也認識到媒體查詢只能為我們提供自適應設計效果，不能真正實現(xiàn)響應式設計。對于響應式設計來說，媒體查詢是必需的，而能讓我們的設計在媒體查詢設置的斷點之間靈動顯示的流動布局技術(shù)同樣必需。創(chuàng)建基本的流動布局，保證頁面在媒體查詢斷點之間的顯示效果平滑流暢，是我們下一章將要講述的內(nèi)容。【注釋】

\h(1)最新Windows版能夠可視化安裝。3擁抱流式布局20世紀90年代末，我剛學習做網(wǎng)頁的時候，頁面布局結(jié)構(gòu)都是基于表格的。通常，屏幕上顯示的各部分元素都是百分比寬度。例如，左側(cè)的導航欄可能占據(jù)20%的屏幕寬度，主內(nèi)容區(qū)占據(jù)80%。那時的瀏覽器視口還沒有像今天這樣天差地別，所以表格式布局在有限范圍的視口中表現(xiàn)良好且能自由伸縮。沒人太在意某些句子在不同大小的屏幕上效果不一樣。不過，隨著CSS的興起，網(wǎng)頁設計也更加接近印刷設計，很多人（包括我）開始使用固定的基于像素的布局，而基于百分比的布局逐年減少。所有偉大的設計和思想，都會卷土重來。迷你車、燙發(fā)（我喜歡）以及喇叭牛仔褲都在多年沉寂后卷土重來?，F(xiàn)在，輪到百分比布局方法上演王者歸來了。本章內(nèi)容理解為什么響應式設計需要百分比布局將元素的固定像素寬度轉(zhuǎn)換為百分比寬度將文字的固定像素大小轉(zhuǎn)換為等量的相對尺寸理解如何找到任意元素的上下文學習如何使圖片平滑縮放學習如何為不同的大小的屏幕提供不同的圖片學習如何讓媒體查詢與彈性圖片及流式布局協(xié)同工作使用CSS網(wǎng)格系統(tǒng)從頭創(chuàng)建一個響應式布局3.1固定布局經(jīng)不起未來考驗我前面說過，在“表格布局”的時代落幕之后，很少有需要使用百分比布局。一般情況下，我接到的要求都是讓HTML和CSS可以完美匹配950-1000像素顯示屏。如果布局使用了百分比寬度（如90%），耳邊很快就能聽到抱怨：“我的顯示器上效果不太一樣。”固定像素尺寸的網(wǎng)頁是匹配固定像素尺寸顯示器的最簡單辦法。即使在最近，當我們針對某個特定的流行設備如iPad或者iPhone，使用媒體查詢來制作修正版的布局時（類似第2章的例子），仍然是基于已知的視口寬度使用固定像素尺寸。很多人喜歡這種方式，因為每次有新東西出來，只要用戶要求修改網(wǎng)站，就可以借機收一次費。但是，這種方法不是一種完全兼容未來的網(wǎng)頁制作方法。未來，還會出現(xiàn)更多大小不一的視口，我們需要一些適應未知設備的方法。3.2為什么響應式設計需要百分比布局在認識到媒體查詢威力無比的同時，我們也要看到它的局限性。那些僅使用媒體查詢來適應不同視口的固定寬度設計，只會從一組CSS媒體查詢規(guī)則突變到另一組，兩者之間沒有任何平滑漸變。從我們在第2章的例子來看，當某個視口處于媒體查詢設置的固定寬度范圍之外（可能是某種未知的未來設備及視口），網(wǎng)頁就需要水平滾動才能完整瀏覽。不過我們想要的是一個靈活的設計，能在所有視口中都完美顯示，而不僅僅只針對媒體查詢設定的一些固定視口。切入主題吧（看出來我在這抖的包袱了嗎？我用了一句電影行話來搭配我們的電影主題的網(wǎng)站……沒看懂？好冷啊，我去穿件外套……），我們需要將固定像素布局轉(zhuǎn)換成靈活的百分比布局。這樣才能讓頁面元素根據(jù)視口大小在一個又一個媒體查詢之間靈活伸縮修正樣式。百分比布局和媒體查詢和諧共處我之前提到過伊?！ゑR科特在AListApart上發(fā)表的有關(guān)響應式網(wǎng)頁設計的文章（/articles/responsive-web-design/）。其實他采用的技術(shù)（流動布局、彈性圖片和媒體查詢）并不新穎，而將這些理念基于一套完整統(tǒng)一的方法論進行應用則很有創(chuàng)造性。對于很多網(wǎng)頁設計工作來說，他的文章打開了很多新的思路。事實上，這種網(wǎng)頁設計的新方法做到了兩全其美：使用百分比布局創(chuàng)建流動的彈性界面，同時使用媒體查詢來限制元素的變動范圍。將這兩者組合到一起構(gòu)成了響應式設計的核心，基于此可以創(chuàng)造出真正完美的設計。3.3將網(wǎng)頁從固定布局修改為百分比布局在可預見的未來，你看到的和制作的網(wǎng)頁都還會使用固定尺寸。當前，我們通常是在Photoshop、Fireworks等軟件制作的設計圖中（基于像素單位）度量元素的大小、外邊距，然后將這些尺寸直接寫進CSS代碼中。文字大小也是這樣設置的。我們在圖片編輯軟件中點擊一下文字對象，查看其具體尺寸（一般單位是像素），然后將其寫入對應的CSS代碼。那我們?nèi)绾螌⒐潭ǔ叽甾D(zhuǎn)換為相對尺寸呢？3.3.1需要牢記的公式作為伊桑·馬科特的粉絲，我對他的崇拜可能有點太過了。但此處我有必要再給他行一次三跪九叩之禮。在丹·錫德霍姆（DanCederholm）編寫的《無懈可擊的Web設計》一書中，伊?！ゑR科特為其撰寫了一章關(guān)于流動布局的內(nèi)容。在書中，他提供了一個簡易可行的公式，將固定