響應(yīng)式Web設(shè)計（HTML5和CSS3實戰(zhàn)）第2版

響應(yīng)式Web設(shè)計（HTML5和CSS3實戰(zhàn)）第2版目錄\h第1章響應(yīng)式Web設(shè)計基礎(chǔ)\h1.1定義需求\h1.2什么是響應(yīng)式Web設(shè)計\h響應(yīng)式Web設(shè)計的由來\h1.3瀏覽器支持\h關(guān)于工具和文本編輯器\h1.4第一個響應(yīng)式的例子\h1.4.1HTML\h1.4.2圖片\h1.4.3媒體查詢\h1.5示例的不足之處\h1.6小結(jié)\h第2章媒體查詢\h2.1為什么響應(yīng)式Web設(shè)計需要媒體查詢\hCSS中基本的條件邏輯\h2.2媒體查詢的語法\h在link標(biāo)簽中使用媒體查詢\h2.3組合媒體查詢\h2.3.1@import與媒體查詢\h2.3.2在CSS中使用媒體查詢\h2.3.3媒體查詢可以測試哪些特性\h2.4通過媒體查詢修改設(shè)計\h2.4.1任何CSS都可以放在媒體查詢里\h2.4.2針對高分辨率設(shè)備的媒體查詢\h2.5組織和編寫媒體查詢的注意事項\h2.5.1使用媒體查詢鏈接不同的CSS文件\h2.5.2分隔媒體查詢的利弊\h2.5.3把媒體查詢寫在常規(guī)樣式表中\(zhòng)h2.6組合媒體查詢還是把它們寫在需要的地方\h2.7關(guān)于視口的meta標(biāo)簽\h2.8媒體查詢4級\h2.8.1可編程的媒體特性\h2.8.2交互媒體特性\h2.8.3懸停媒體特性\h2.8.4環(huán)境媒體特性\h2.9小結(jié)\h第3章彈性布局與響應(yīng)式圖片\h3.1將固定像素大小轉(zhuǎn)換為彈性比例大小\h3.1.1為什么需要Flexbox\h3.1.2行內(nèi)塊與空白\h3.1.3浮動\h3.1.4表格與表元\h3.2Flexbox概述\h3.2.1Flexbox三級跳\h3.2.2瀏覽器對Flexbox的支持\h3.3使用Flexbox\h3.3.1完美垂直居中文本\h3.3.2偏移\h3.3.3反序\h3.3.4不同媒體查詢中的不同F(xiàn)lexbox布局\h3.3.5行內(nèi)伸縮\h3.3.6Flexbox的對齊\h3.3.7flex\h3.3.8簡單的粘附頁腳\h3.3.9改變原始次序\h3.3.10Flexbox小結(jié)\h3.4響應(yīng)式圖片\h3.4.1響應(yīng)式圖片的固有問題\h3.4.2通過srcset切換分辨率\h3.4.3srcset及sizes聯(lián)合切換\h3.4.4picture元素\h3.5小結(jié)\h第4章HTML5與響應(yīng)式Web設(shè)計\h4.1得到普遍支持的HTML5標(biāo)記\h4.2開始寫HTML5網(wǎng)頁\h4.2.1doctype\h4.2.2HTML標(biāo)簽與lang屬性\h4.2.3指定替代語言\h4.2.4字符編碼\h4.3寬容的HTML5\h4.3.1理性編寫HTML5\h4.3.2向<a>標(biāo)簽致敬\h4.4HTML5的新語義元素\h4.4.1<main>元素\h4.4.2<section>元素\h4.4.3<nav>元素\h4.4.4<article>元素\h4.4.5<aside>元素\h4.4.6<figure>和<figcaption>元素\h4.4.7<detail>和<summary>元素\h4.4.8<header>元素\h4.4.9<footer>元素\h4.4.10<address>元素\h4.4.11h1到h6\h4.5HTML5文本級元素\h4.5.1<b>元素\h4.5.2<em>元素\h4.5.3<i>元素\h4.6作廢的HTML特性\h4.7使用HTML5元素\h憑常識選擇元素\h4.8WCAG和WAI-ARIA\h4.8.1WCAG\h4.8.2WAI-ARIA\h4.8.3如果你只能記住一件事\h4.8.4ARIA的更多用途\h4.9在HTML5中嵌入媒體\h4.9.1使用HTML5視頻和音頻\h4.9.2audio與video幾乎一樣\h4.10響應(yīng)式HTML5視頻與內(nèi)嵌框架\h4.11關(guān)于“離線優(yōu)先”\h4.12小結(jié)\h第5章CSS3新特性\h5.1沒人無所不知\h5.2剖析CSS規(guī)則\h5.3便捷的CSS技巧\hCSS響應(yīng)式多列布局\h5.4斷字\h5.4.1截短文本\h5.4.2創(chuàng)建水平滾動面板\h5.5在CSS中創(chuàng)建分支\h5.5.1特性查詢\h5.5.2組合條件\h5.5.3Modernizr\h5.6新CSS3選擇符\h5.6.1CSS3屬性選擇符\h5.6.2CSS3子字符串匹配屬性選擇符\h5.6.3屬性選擇符的注意事項\h5.6.4屬性選擇符選擇以數(shù)值開頭的ID和類\h5.7CSS3結(jié)構(gòu)化偽類\h5.7.1:last-child\h5.7.2nth-child\h5.7.3理解nth\h5.7.4基于nth的選擇與響應(yīng)式設(shè)計\h5.7.5:not\h5.7.6:empty\h5.7.7:first-line\h5.8CSS自定義屬性和變量\h5.9CSScalc\h5.10CSSLevel4選擇符\h5.10.1:has偽類\h5.10.2相對視口的長度\h5.11Web排版\h5.11.1@font-face\h5.11.2通過@font-face實現(xiàn)Web字體\h5.11.3注意事項\h5.12CSS3的新顏色格式及透明度\h5.12.1RGB\h5.12.2HSL\h5.12.3alpha通道\h5.12.4CSSColorModuleLevel4的顏色操作\h5.13小結(jié)\h第6章CSS3高級技術(shù)\h6.1CSS3的文字陰影特效\h6.1.1省略blur值\h6.1.2多文字陰影\h6.2盒陰影\h6.2.1內(nèi)陰影\h6.2.2多重陰影\h6.2.3陰影尺寸\h6.3背景漸變\h6.3.1線性漸變語法\h6.3.2徑向漸變背景\h6.3.3為響應(yīng)式而生的關(guān)鍵字\h6.4重復(fù)漸變\h6.5使用漸變背景創(chuàng)造圖案\h6.6多張背景圖片\h6.6.1背景大小\h6.6.2背景位置\h6.6.3背景屬性的縮寫\h6.7高分辨率背景圖像\h6.8CSS濾鏡\h6.8.1可用的CSS濾鏡\h6.8.2使用多個CSS濾鏡\h6.9CSS性能的警告\hCSS遮罩和剪裁的注意事項\h6.10小結(jié)\h第7章SVG與響應(yīng)式Web設(shè)計\h7.1SVG的歷史\h7.2用文檔表示的圖像\h7.2.1SVG的根元素\h7.2.2命名空間\h7.2.3標(biāo)題和描述標(biāo)簽\h7.2.4defs標(biāo)簽\h7.2.5元素g\h7.2.6SVG形狀元素\h7.2.7SVG路徑\h7.3使用流行的圖像編輯工具和服務(wù)創(chuàng)建SVG\h利用SVG圖標(biāo)服務(wù)\h7.4在Web頁面中插入SVG\h7.4.1使用img標(biāo)簽\h7.4.2使用object標(biāo)簽\h7.4.3把SVG作為背景圖像插入\h7.4.4關(guān)于dataURI的簡短介紹\h7.4.5生成圖像精靈\h7.5內(nèi)聯(lián)SVG\h7.5.1利用符號復(fù)用圖形對象\h7.5.2根據(jù)上下文改變內(nèi)聯(lián)SVG顏色\h7.5.3復(fù)用外部圖形對象資源\h7.6不同插入方式下可以使用的功能\h瀏覽器兼容性問題\h7.7SVG的怪癖\h7.7.1SMIL動畫\h7.7.2使用外部樣式表為SVG添加樣式\h7.7.3使用內(nèi)聯(lián)樣式為SVG添加樣式\h7.7.4用CSS為SVG添加動畫\h7.8使用JavaScript添加SVG動畫\h使用GreenSock添加SVG動畫\h7.9優(yōu)化SVG\h7.10把SVG作為濾鏡\h7.11SVG中媒體查詢的注意事項\h7.11.1實現(xiàn)技巧\h7.11.2更多資料\h7.12小結(jié)\h第8章CSS3過渡、變形和動畫\h8.1什么是CSS3過渡以及如何使用它\h8.1.1過渡相關(guān)的屬性\h8.1.2過渡的簡寫語法\h8.1.3在不同時間段內(nèi)過渡不同屬性\h8.1.4理解過渡調(diào)速函數(shù)\h8.1.5響應(yīng)式網(wǎng)站中的有趣過渡\h8.2CSS的2D變形\h8.2.1scale\h8.2.2translate\h8.2.3rotate\h8.2.4skew\h8.2.5matrix\h8.2.6transform-origin屬性\h8.3CSS3的3D變形\htransform3d屬性\h8.4CSS3動畫效果\hanimation-fill-mode屬性\h8.5小結(jié)\h第9章表單\h9.1HTML5表單\h9.2理解HTML5表單中的元素\h9.2.1placeholder\h9.2.2required\h9.2.3autofocus\h9.2.4autocomplete\h9.2.5list及對應(yīng)的datalist元素\h9.3HTML5的新輸入類型\h9.3.1email\h9.3.2number\h9.3.3url\h9.3.4tel\h9.3.5search\h9.3.6pattern\h9.3.7color\h9.3.8日期和時間輸入類型\h9.3.9范圍值\h9.4如何給不支持新特性的瀏覽器打補丁\h9.5使用CSS美化HTML5表單\h9.5.1顯示必填項\h9.5.2創(chuàng)造一個背景填充效果\h9.6小結(jié)\h第10章實現(xiàn)響應(yīng)式Web設(shè)計\h10.1盡快讓設(shè)計在瀏覽器和真實設(shè)備上運行起來\h讓設(shè)計決定斷點\h10.2在真實設(shè)備上觀察和使用設(shè)計\h10.3擁抱漸進增強\h10.4確定需要支持的瀏覽器\h10.4.1等價的功能，而不是等價的外觀\h10.4.2選擇要支持的瀏覽器\h10.5分層的用戶體驗\h實現(xiàn)體驗分層\h10.6將CSS斷點與JavaScript聯(lián)系起來\h10.7避免在生產(chǎn)中使用CSS框架\h10.8采用務(wù)實的解決方案\h使用鏈接代替按鈕\h10.9盡可能使用最簡單的代碼\h10.10根據(jù)視口隱藏、展示和加載內(nèi)容\h將復(fù)雜的可視化工作交給CSS\h10.11驗證器和代碼檢測工具\h10.12性能\h10.13下一個劃時代的產(chǎn)物\h10.14小結(jié)

第1章響應(yīng)式Web設(shè)計基礎(chǔ)幾年前，我們看到的網(wǎng)站還都是固定寬度的，目標(biāo)是讓所有用戶都擁有相同的體驗。這種固定寬度（通常為960像素左右）對筆記本電腦來說也不算寬，擁有更大顯示器的用戶則會在兩側(cè)看到很大的白邊。2007年，蘋果iPhone首次帶來了真正意義的手機上網(wǎng)體驗，徹底改變了人們上網(wǎng)的方式。本文第1版曾這么寫道：“從2010年7月到2011年7月，短短12個月，全球手機瀏覽器的使用量就從2.86%飆升至7.02%?！?015年年中，同一家調(diào)查機構(gòu)（）的數(shù)據(jù)顯示，這個數(shù)字已經(jīng)達(dá)到33.47%。北美地區(qū)的數(shù)字則是25.86%。不管怎么統(tǒng)計，移動設(shè)備的增長都是前所未有的。與此同時，27英寸乃至30英寸的大屏幕顯示器如今也成為了司空見慣的東西。這樣一來，上網(wǎng)設(shè)備屏幕之間的差距也達(dá)到了前所未有之大。面對不斷擴展的瀏覽器和設(shè)備，我們還是有應(yīng)對方案的。這個方案就是基于HTML5和CSS3的響應(yīng)式Web設(shè)計。響應(yīng)式Web設(shè)計可以讓一個網(wǎng)站同時適配多種設(shè)備和多個屏幕，可以讓網(wǎng)站的布局和功能隨用戶的使用環(huán)境（屏幕大小、輸入方式、設(shè)備/瀏覽器能力）而變化。不僅如此，基于HTML5和CSS3的響應(yīng)式Web設(shè)計，并不需要依賴服務(wù)端或后端方案。1.1定義需求無論你是剛剛接觸響應(yīng)式Web設(shè)計、HTML5、CSS3，還是已經(jīng)對它們很熟悉了，我都希望本章可以實現(xiàn)兩個目標(biāo)。如果你已經(jīng)在自己的響應(yīng)式Web設(shè)計中使用了HTML5和CSS3，本章可以幫你快速做一個回顧。如果你是一位新手，可以把這一章看成“新手訓(xùn)練營”，它會告訴你閱讀本文所需的一切。學(xué)完本章，你將對實現(xiàn)響應(yīng)式Web設(shè)計有一個全面清晰的了解。有人會問，既然如此，剩下9章有什么用呢？本章最后也會對此給出答案。以下是本章的主要內(nèi)容：定義響應(yīng)式Web設(shè)計如何確定瀏覽器支持程度工具和文本編輯器第一個響應(yīng)式的例子視口meta標(biāo)簽的重要意義怎么讓圖片隨窗口縮放用CSS3媒體查詢定義斷點前面例子的不足之處為什么學(xué)習(xí)之旅才剛剛開始1.2什么是響應(yīng)式Web設(shè)計“響應(yīng)式Web設(shè)計”這個名字是EthanMarcotte在2010年發(fā)明的。當(dāng)時，他在AListApart上寫了一篇文章（\h/articles/responsive-web-design/），這篇文章綜合運用了三種已有技術(shù)（彈性網(wǎng)格布局、彈性圖片/媒體、媒體查詢）實現(xiàn)了一個解決方案，就叫“響應(yīng)式Web設(shè)計”。響應(yīng)式Web設(shè)計的由來所謂響應(yīng)式Web設(shè)計，就是網(wǎng)頁內(nèi)容會隨著訪問它的視口及設(shè)備的不同而呈現(xiàn)不同的樣式。最初，響應(yīng)式設(shè)計是從“桌面”、固定寬度設(shè)計開始的。然后，到了小屏幕上，內(nèi)容會重排，或者根據(jù)情況隱藏部分內(nèi)容?？墒?，隨著時間推移，人們發(fā)現(xiàn)，還是采用相反的設(shè)計思路更好，即先為小屏幕設(shè)計內(nèi)容、樣式，然后再向大屏幕擴展。詳細(xì)介紹這些情況之前，我們先來看看瀏覽器支持與文本編輯器/工具。1.3瀏覽器支持由于響應(yīng)式Web設(shè)計已經(jīng)廣為人知，所以跟客戶及相關(guān)方溝通變得越來越容易。提到“響應(yīng)式Web設(shè)計”，很多人都表示知道怎么回事。而寫一個項目就可以滿足所有設(shè)備的說法也很有競爭優(yōu)勢。不過，瀏覽器支持一直是響應(yīng)式Web設(shè)計面臨的最大問題。市面上如此多的瀏覽器和設(shè)備，要想一個不落地支持并不現(xiàn)實。有時候是時間問題，有時候是預(yù)算問題，有時候兩方面問題都有。一般來說，要支持的瀏覽器版本越早，想達(dá)到現(xiàn)代瀏覽器中相同功能和效果所需的工作量就越大。因此，最好的做法是先寫一個較輕量的代碼架構(gòu)，然后根據(jù)所需的體驗針對能力更強的瀏覽器進行擴展，包括視覺和功能。本文上一版還花了不少篇幅介紹怎么迎合老舊版本的桌面瀏覽器。但這一版不會在這方面浪費時間了。在寫作這一版的2015年年中，IE6、IE7、IE8基本消失了，就連IE9的市場份額也降到了2.45%（IE10只占1.94%，IE11上升到了11.68%）。如果你必須考慮兼容IE8甚至更低版本，在同情你的遭際之余，我必須坦率地告訴你，這本文里沒多少相關(guān)的內(nèi)容可資利用。對于其他人來說，應(yīng)該勸告自己的客戶或老板，告訴他們?yōu)槭裁唇o那些“殘疾”瀏覽器寫代碼是錯誤的，而把時間和資源主要放在支持現(xiàn)代瀏覽器和現(xiàn)代平臺上才是最明智的。不過到最后，唯一重要的因素還是你自己。在通常情況下，我們寫的網(wǎng)站必須在所有常用瀏覽器里表現(xiàn)正常。除了基本功能，有必要提前確定針對哪個平臺要實現(xiàn)最強的功能，以便對其他平臺上的視覺和功能作出相應(yīng)取舍。這是非常實際的做法，因為從最簡單的“基本”體驗開始，逐步擴充（所謂“漸進增強”）更容易。相反，先做出大而全的版本，然后再針對能力不足的平臺尋找后備方案（所謂“平穩(wěn)退化”）則要麻煩得多。為了進一步說明提前確定主要支持平臺很重要，我們舉個例子。假設(shè)你很倒霉，25%的用戶都在用IE9，那你必須考慮這個版本的IE都支持什么特性，然后再相應(yīng)地剪裁自己的設(shè)計方案。同樣，如果有大量用戶使用的手機平臺是Android2，你也要考慮類似的問題。不同平臺需要考慮的“基本”體驗相差很大。如果沒有合適的數(shù)據(jù)，那么我會按照一個簡單粗暴的邏輯來決定是否開發(fā)某個特定平臺/瀏覽器的版本：如果支持瀏覽器X的開發(fā)成本超過了瀏覽器X的用戶創(chuàng)造的收益，那么就不為該瀏覽器開發(fā)特殊的版本。能不能適配某個舊平臺/版本不是問題，問題在于是否應(yīng)該去適配它。在確定哪些平臺和瀏覽器版本支持什么特性時，建議參考這個網(wǎng)站：\h。這個網(wǎng)站的界面簡潔，查詢方便。關(guān)于工具和文本編輯器用什么文本編輯器或IDE來寫響應(yīng)式網(wǎng)站都一樣。如果你覺得某個簡單的文本編輯器足夠你高效編寫HTML、CSS和JavaScript代碼，那就行啦。其他工具也一樣，沒有哪個工具是必需的。只要能讓你寫HTML、CSS和JavaScript就行。SublimeText、Vim、Coda、VisualStudio、Notepad，選哪一個都不重要，你喜歡就好。不過，請大家注意，現(xiàn)在確實出現(xiàn)了不少新工具（通常也是免費的）。這些工具可以把以往需要手工來做的事自動化。比如，CSS預(yù)處理器（Sass、LESS、Stylus、PostCSS）可以幫我們組織代碼、變量、顏色操作和數(shù)學(xué)運算。像PostCSS這樣的工具可以幫我們完成添加瀏覽器前綴這樣煩瑣的任務(wù)。另外，一些清理和驗證工具可以幫我們檢查HTML、CSS和JavaScript代碼是否符合標(biāo)準(zhǔn)，自動提示輸入錯誤和語法錯誤。新工具始終在不斷涌現(xiàn)，而且會不斷改進。雖然本文有時會提到一些有用工具的名字，但并不代表對你來說最合適，你應(yīng)該去找最適合自己的。事實上，本文的示例除了HTML和CSS標(biāo)準(zhǔn)之外，不依賴任何工具。至于怎么利用前端工具讓自己的代碼更快更可靠，那是你的事。1.4第一個響應(yīng)式的例子本章開頭承諾讓你在學(xué)完這一章之后，了解所有與響應(yīng)式Web設(shè)計相關(guān)的知識。前面我們討論的都是一些相關(guān)話題，現(xiàn)在該付諸行動了。代碼示例下載本文示例代碼的地址是：\hcation/download.zip或\h/benfrain/rwd。請注意，下載到的代碼只包含每個示例的最終版本。比如，第2章的例子是第2章結(jié)束時的狀態(tài)，而不是該章中間部分的某個狀態(tài)。1.4.1HTML先從HTML5結(jié)構(gòu)講起。大家先不要著急理解每一行代碼的用途（特別是<head>中的代碼），第4章會詳細(xì)介紹它們?，F(xiàn)在，我們只關(guān)注<body>標(biāo)簽中的元素。必須承認(rèn)，現(xiàn)在的網(wǎng)頁看起來一點也不特別，只有幾個DIV、一張LOGO圖、一張圖片（看起來很好吃的松餅）、一兩段文本和一個項目列表。以下是刪節(jié)后的代碼。為簡單起見，段落中的文字已經(jīng)隱藏了，因為我們要關(guān)注的只是結(jié)構(gòu)。只要知道那些文字介紹了怎么制作標(biāo)準(zhǔn)的英式松餅就行了。如果想看完整的HTML文件，請解壓下載后的代碼。

<!doctypehtml>

<htmlclass="no-js"lang="en">

<head>

<metacharset="utf-8">

<title>OurfirstresponsivewebpagewithHTML5andCSS3</

title>

<metaname="description"content="Abasicresponsivewebpage

-anexamplefromChapter1">

<linkrel="stylesheet"href="css/styles.css">

</head>

<body>

<divclass="Header">

<ahref="/"class="LogoWrapper"><imgsrc="img/SOC-Logo.

png"alt="SconeO'Clocklogo"/></a>

<pclass="Strap">Scones:themostresplendentofsnacks</

p>

</div>

<divclass="IntroWrapper">

<pclass="IntroText">Occasionallymalignedand

misunderstood;thesconeisaquintessentiallyBritishclassic.</p>

<divclass="MoneyShot">

<imgclass="MoneyShotImg"src="img/scones.jpg"

alt="Incrediblescones"/>

<pclass="ImageCaption">Incrediblescones,picture

fromWikipedia</p>

</div>

</div>

<p>Recipeandservingsuggestionsfollow.</p>

<divclass="Ingredients">

<h3class="SubHeader">Ingredients</h3>

<ul>

</ul>

</div>

<divclass="HowToMake">

<h3class="SubHeader">Method</h3>

<olclass="MethodWrapper">

</ol>

</div>

</body>

</html>

默認(rèn)情況下，網(wǎng)頁布局是彈性的。就它現(xiàn)在這個樣子把它打開（還不包含媒體查詢），縮放瀏覽器窗口，你會看見文本會根據(jù)屏幕縮放自動重排。那換個設(shè)備怎么樣呢？在沒有CSS的情況下，iPhone中的效果如下圖所示。在iPhone中也是一個“正常的”網(wǎng)頁。這是因為iOS默認(rèn)會按980像素寬度來渲染網(wǎng)頁，然后再把頁面縮小呈現(xiàn)在視口當(dāng)中。瀏覽器中用于呈現(xiàn)網(wǎng)頁的區(qū)域叫視口（viewport）。視口通常并不等于屏幕大小，特別是可以縮放瀏覽器窗口的情況下。因此，從現(xiàn)在開始，我們會使用這個準(zhǔn)確的術(shù)語指代可以呈現(xiàn)網(wǎng)頁的區(qū)域。為了解決前面的問題，可以在網(wǎng)頁的<head>中添加下面這行代碼：

<metaname="viewport"content="width=device-width">

這個視口的<meta>標(biāo)簽是一種非標(biāo)準(zhǔn)的（但卻是事實標(biāo)準(zhǔn)的）方式，它告訴瀏覽器怎么渲染網(wǎng)頁。在這里，<meta>標(biāo)簽想表達(dá)的意思是：按照設(shè)備的寬度（device-width）來渲染網(wǎng)頁內(nèi)容。事實上，在支持這個標(biāo)簽的設(shè)備上給你看一看效果，你就明白了。不錯呀！現(xiàn)在，網(wǎng)頁中的文字看起來更有“原生”的感覺了。我們繼續(xù)。第2章在介紹媒體查詢的時候還會詳細(xì)討論<meta>標(biāo)簽的更多設(shè)置和組合用法。1.4.2圖片有人說“一圖勝千言”，確實如此。我們網(wǎng)頁中關(guān)于松餅的文字介紹再多，也沒有圖片有吸引力。下面我們就在頁面上方添加一張松餅的圖片，效果類似引誘用戶往下看的大題圖。哇，真是好大一張圖（2000像素寬），它讓整個網(wǎng)頁看起來都失衡了。不行，必須解決這個問題。可以用CSS給圖片指定固定寬度，但問題是我們想讓它能在不同大小的屏幕中自動縮放。比如，我們例子中的iPhone屏幕寬度為320像素，如果我們把圖片設(shè)置成320像素寬，那么iPhone屏幕旋轉(zhuǎn)后又怎么辦呢？這時候320像素變成了480像素。解決方案很簡單，只要一行CSS代碼就可以讓圖片隨容器寬度自動縮放。在這里我們創(chuàng)建一個CSS文件：css/styles.css，將它鏈接到HTML頁面的頭部。以下是我們在這個CSS文件中寫的代碼。一般來說，應(yīng)該先設(shè)置一些默認(rèn)值，這些話題后面幾章我們再討論?，F(xiàn)在我們就加入這點代碼：

img{

max-width:100%;

}

回到手機上，刷新頁面，結(jié)果比較符合預(yù)期了。這里聲明max-width規(guī)則，就是要保證所有圖片最大顯示為其自身的100%（即最大只可以顯示為自身那么大）。此時，如果包含圖片的元素（比如包含圖片的body或div）比圖片固有寬度小，圖片會縮放占滿最大可用空間。為什么不用width:100%?要實現(xiàn)圖片的自動縮放，也可以使用更通用的width屬性，比如width:100%。然而，這條規(guī)則在這里的效果不同。如果給width屬性設(shè)置一個值，那么圖片就會按照該值顯示，不考慮自身固有寬度。以我們例子中的LOGO（同樣也是一張圖片）為例，這條規(guī)則會導(dǎo)致它顯示得跟它的容器一樣寬。在容器比圖片寬得多的情況下（就像我們這里的LOGO一樣），圖片會被無謂地拉伸。很好，現(xiàn)在圖片和文本都顯示正常了。不管視口多大，至少水平方向上再也沒有內(nèi)容溢出了。再回過頭來在較大的視口中看看效果。下圖是在視口寬度大約為1400像素下看到的效果，基本樣式下的文本和圖片明顯被拉長了。這可不行！事實上，視口寬度達(dá)到600像素時，效果就不好了。在這個寬度上，如果我們可以對某些元素進行重排，也許可以有所改進，比如調(diào)整圖片大小并將其放置在一側(cè)，或修改某些元素的字體大小和背影顏色。沒問題，使用CSS媒體查詢可以輕易實現(xiàn)我們說的所有功能。1.4.3媒體查詢我們知道，當(dāng)視口寬度超過600像素時，當(dāng)前的頁面布局存在被嚴(yán)重拉伸的問題。下面我們就使用CSS3的媒體查詢根據(jù)屏幕寬度來調(diào)整布局。媒體查詢可以讓我們在某些條件下（如寬度和高度為多少的情況下）為網(wǎng)頁應(yīng)用樣式。不針對流行的設(shè)備寬度設(shè)置斷點所謂“斷點”，就是某個寬度臨界點，跨過這個點布局就會發(fā)生顯著變化。人們在剛開始使用媒體查詢的時候，經(jīng)常會針對當(dāng)時流行的設(shè)備設(shè)置斷點。當(dāng)時，iPhone（320像素×480像素）和iPad（768像素×1024像素）的寬度決定了斷點。不過，當(dāng)時那樣做并不好，現(xiàn)在來看就更不可取了。這是因為這樣實際上把設(shè)計跟特定的屏幕大小綁定了。既然是響應(yīng)式設(shè)計，那應(yīng)該與顯示它的設(shè)備無關(guān)才對，而不是只在某些屏幕中才最合適。斷點應(yīng)該由內(nèi)容和設(shè)計本身決定。比如你的設(shè)計可能在500像素或更寬的時候看起來就不對了，當(dāng)然也許是800像素?？傊?，斷點應(yīng)該由你自己的項目設(shè)計決定。-第2章將全面介紹媒體查詢，因此“媒體查詢”也是那一章的名字。不過，為了說明如何改進我們的設(shè)計，這里可以只關(guān)注一種媒體查詢，即最小寬度媒體查詢。在這個媒體查詢中設(shè)置的CSS規(guī)則，只在視口符合最小定義寬度條件時才會應(yīng)用到網(wǎng)頁。實際的最小寬度可以使用不同的長度單位指定，比如百分比、em、rem和px。在CSS中，最小寬度媒體查詢是這樣寫的：

@mediascreenand(min-width:50em){

/*樣式*/

}

@media指令告訴瀏覽器這里是一個媒體查詢，screen（技術(shù)上講，不需要在這里聲明“屏幕”，具體細(xì)節(jié)請參考下一章）告訴瀏覽器這里的規(guī)則只適用于屏幕類型，而and(min-width:50em)的意思是其中的規(guī)則只適用于視口寬度在50em以上的情況。BryanRieger第一次指出（\h/bryanrieger/rethinking-the-mobile-web-by-yiibu）：“沒有媒體查詢本身就是媒體查詢。”這句話的意思就是，我們在媒體查詢外面寫的第一條規(guī)則，實際上是針對所有媒體的“基本”樣式。在此基礎(chǔ)上，可以再針對不同能力的設(shè)備加以擴展?，F(xiàn)在，只要知道應(yīng)該以最小屏幕為起點，然后再根據(jù)需求漸進擴充視覺和功能即可。針對更大的屏幕做修改我們知道，視口寬度達(dá)到600像素（或37.5rem）時，布局就會顯得很難看。下面我們再通過一個例子，來展示怎么根據(jù)視口大小實現(xiàn)不同的布局。基本上所有瀏覽器默認(rèn)的文本大小都是16像素，因此用像素值除以16就可以得到rem值。第2章會進一步介紹為什么需要這樣做。首先，不讓題圖太大，而是把它挪到右側(cè)去。然后把介紹文字放在圖的左側(cè)。然后，再把主要的文本內(nèi)容，也就是如何制作松餅的方法，放在位于右側(cè)帶框線的配料表左下方。這些樣式調(diào)整都可以封裝到一個媒體查詢當(dāng)中。下圖就是調(diào)整之后的效果。完成之后的頁面在較小的屏幕上還和以前一樣，只是在視口寬度大于50rem時，就會調(diào)整為新的布局。以下是我們添加的布局樣式：

@mediascreenand(min-width:50rem){

.IntroWrapper{

display:table;

table-layout:fixed;

width:100%;

}

.MoneyShot,

.IntroText{

display:table-cell;

width:50%;

vertical-align:middle;

text-align:center;

}

.IntroText{

padding:.5rem;

font-size:2.5rem;

text-align:left;

}

.Ingredients{

font-size:.9rem;

float:right;

padding:1rem;

margin:00.5rem1rem;

border-radius:3px;

background-color:#ffffdf;

border:2pxsolid#e8cfa9;

}

.Ingredientsh3{

margin:0;

}

}

還算不錯，是吧？只用了少量代碼，就讓頁面實現(xiàn)了對視口寬度變化的響應(yīng)，為用戶呈現(xiàn)了更實用的外觀。有了這些媒體查詢樣式，在iPhone上我們看到的頁面如下：而在50rem寬時，頁面效果如下：添加更多裝飾對我們理解什么是漸進增強并沒有什么意義，因此這里就省略了。如果你想查看相關(guān)代碼，可以解壓下載的示例代碼。雖然這個例子本身很簡單，但它已經(jīng)涵蓋了響應(yīng)式Web設(shè)計的基本方法?？偨Y(jié)一下我們介紹的基本內(nèi)容。首先是“基本的”樣式，它適用于任何設(shè)備。在這個樣式基礎(chǔ)上，我們再為不同視口、不同能力的設(shè)備，漸進增加不同的視覺效果和功能。CSS媒體查詢的（3級）規(guī)范在這里：\h/TR/css3-media-queries/。還有一個CSS媒體查詢（4級）的草案：\h/csswg/media-queries-4/。1.5示例的不足之處本章介紹了使用HTML5和CSS3實現(xiàn)響應(yīng)式Web設(shè)計相關(guān)的所有基本要素。我們都知道，前面的示例遠(yuǎn)遠(yuǎn)不能涵蓋我們想要實現(xiàn)的目標(biāo)，同樣也不代表我們只能做到這些。如果我們想讓網(wǎng)頁響應(yīng)環(huán)境光線的變化呢？如果我們想在用戶使用不同輸入設(shè)備（手指而不是鼠標(biāo)）時改變鏈接大小呢？如果我們想只用CSS實現(xiàn)動畫和元素移動效果呢？還有標(biāo)記。怎么使用標(biāo)記來構(gòu)建頁面，才能保證所有元素都具有語義，比如article、section、menu，或者怎么讓表單內(nèi)置支持驗證（不需要JavaScript參與）？怎么實現(xiàn)在不同視口中修改元素顯示的次序呢？別忘了圖片。這個示例中使用了彈性圖片，可是如果用戶使用手機查看頁面，那么他會下載一個很大的圖片（至少2000像素以上），而在屏幕上又只能縮成幾分之一顯示。這樣頁面會顯得很卡。還有更好的辦法嗎？還有LOGO和圖標(biāo)呢。這個示例使用的是PNG圖片，但使用SVG（ScalableVectorGraphics，可伸縮矢量圖）可以簡單地適用各種分辨率。SVG圖形看起來非常清晰，無論使用什么屏幕。好在你還在看這本文，這些問題的答案將在后續(xù)章節(jié)中陸續(xù)揭曉。1.6小結(jié)收獲不小吧，這一章讓你了解響應(yīng)式Web設(shè)計相關(guān)的所有基本要素。不過，正像我們剛剛說過的，還有很多方面存在不小的改進空間。其實還不夠，因為我們不只想要掌握響應(yīng)式Web設(shè)計的全部技能，更想給用戶提供最刺激的體驗。所以還得繼續(xù)學(xué)習(xí)。首先，我們必須知道CSS媒體查詢的3級和4級標(biāo)準(zhǔn)都提供了哪些特性。我們看到了怎么讓網(wǎng)頁響應(yīng)視口寬度變化，但我們可以做的遠(yuǎn)遠(yuǎn)不止這一點，稍后還將有更精彩的內(nèi)容紛至沓來。趕緊翻到下一章去看看吧。

第2章媒體查詢上一章，我們快速地介紹了響應(yīng)式網(wǎng)頁相關(guān)的基本要素：彈性布局、彈性圖片和媒體查詢。本章詳盡介紹媒體查詢，希望大家能完全掌握它的能力、語法及未來動向。本章內(nèi)容：為什么響應(yīng)式Web設(shè)計需要媒體查詢媒體查詢的語法如何在link標(biāo)簽、@import語句和CSS文件中使用媒體查詢可供測試的設(shè)備特性使用媒體查詢根據(jù)屏幕空間大小調(diào)整視覺效果應(yīng)該把媒體查詢寫在一塊，還是哪里需要寫在哪里理解meta視口標(biāo)簽如何針對iOS和安卓設(shè)備啟用媒體查詢媒體查詢未來可能擁有什么特性CSS3規(guī)范分成很多模塊，媒體查詢（3級）只是其中一個模塊。利用媒體查詢，可以根據(jù)設(shè)備的能力應(yīng)用特定的CSS樣式。比如，可以根據(jù)視口寬度、屏幕寬高比和朝向（水平還是垂直）等，只用幾行CSS代碼就改變內(nèi)容的顯示方式。媒體查詢得到了廣泛實現(xiàn)。除了古老的IE（8及以下版本），幾乎所有瀏覽器都支持它。一句話，沒有理由不用它！W3C制定規(guī)范要走一個批準(zhǔn)流程。如果有空，可以讀讀他們的官方流程文檔：\h/2005/10/Process-20051014/tr。簡單來說，所有規(guī)范都從WD（WorkingDraft，工作草案）開始，然后是CR（CandidateRecommendation，候選推薦），接著是PR（ProposedRecommendation，建議推薦），幾年后才能成為W3CREC（Recommendation，推薦標(biāo)準(zhǔn)）。處于較成熟階段的模塊，通常使用起來也比較安全。比如，CSSTransformsModuleLevel3（\h/TR/css3-3d-transforms/）在2009年3月就進入了WD階段，但瀏覽器對它的支持度比處于CR階段的媒體查詢等模塊差得多。2.1為什么響應(yīng)式Web設(shè)計需要媒體查詢CSS3媒體查詢可以讓我們針對特定的設(shè)備能力或條件為網(wǎng)頁應(yīng)用特定的CSS樣式。翻開W3C的CSS3媒體查詢模塊的規(guī)范（\h/TR/css3-mediaqueries/），可以看到官方給媒體查詢下的定義：“媒體查詢包含媒體類型和零個或多個檢測媒體特性的表達(dá)式。width、height和color都是可用于媒體查詢的特性。使用媒體查詢，可以不必修改內(nèi)容本身，而讓網(wǎng)頁適配不同的設(shè)備。”如果沒有媒體查詢，光用CSS是無法大大修改網(wǎng)頁外觀的。這個模塊讓我們可以提前編寫出適應(yīng)很多不可預(yù)測因素的CSS規(guī)則，比如屏幕方向水平或垂直、視口或大或小，等等。彈性布局雖然可以讓設(shè)計適應(yīng)較多場景，也包括某些尺寸的屏幕，但有時候確實不夠用，因為我們還需要對布局進行更細(xì)致的調(diào)整。媒體查詢讓這一切成為可能，它就相當(dāng)于CSS中基本的條件邏輯。CSS中基本的條件邏輯真正的編程語言都有相應(yīng)的語法構(gòu)造處理一個或多個條件分支。這時候通常指的就是條件邏輯，比如if/else語句。如果提到編程你就心塞，大可不必！這里要講的只一個非常簡單的概念。日常生活中，你可能會在朋友排隊買咖啡時這么跟他說：“如果他們有三重巧克力松餅，給我買一份；如果沒有，就給我買一份胡蘿卜蛋糕?！边@就是有兩種可能結(jié)果的條件語句。在寫作本文時，CSS并不支持真正的條件邏輯或可編程特性。循環(huán)、函數(shù)、迭代和復(fù)雜的數(shù)學(xué)計算仍然只可能在CSS預(yù)處理器中看到（我可曾提過一本不錯的專門講Sass預(yù)處理器的書——《Sass和Compass設(shè)計師指南》?）。不過，媒體查詢確實具有在CSS中實現(xiàn)條件邏輯的能力。使用媒體查詢，其中的樣式只在某些條件具備的情況下才會被應(yīng)用?？删幊痰姆绞綍械腃SS預(yù)處理器的流行已經(jīng)引起CSS規(guī)范編寫者的注意。目前已經(jīng)有了一個關(guān)于CSS變量的WD：\h/TR/css-variables/。不過，現(xiàn)在只有Firefox支持這個建議，因此還不具備普遍意義。2.2媒體查詢的語法說了那么多，媒體查詢的語法是什么樣的，還有更重要的，媒體查詢怎么起作用呢？在任何CSS文件的最后輸入以下代碼，然后打開引用該CSS文件的網(wǎng)頁看看效果。如果不想寫代碼，也可以直接打開本文示例example_02-01：

body{

background-color:grey;

}

@mediascreenand(min-width:320px){

body{

background-color:green;

}

}

@mediascreenand(min-width:550px){

body{

background-color:yellow;

}

}

@mediascreenand(min-width:768px){

body{

background-color:orange;

}

}

@mediascreenand(min-width:960px){

body{

background-color:red;

}

}

好了，在瀏覽器中打開網(wǎng)頁，縮放窗口并看看效果。頁面的背景顏色會隨著當(dāng)前視口大小的變化而變化。稍后我們會介紹這些語法如何起作用。但首先，關(guān)鍵是得知道如何以及在哪里可以使用媒體查詢。在link標(biāo)簽中使用媒體查詢從CSS2開始接觸CSS的讀者都知道，可以在<link>標(biāo)簽的media屬性中指定設(shè)備類型（screen或print），為不同設(shè)備應(yīng)用樣式表?？匆粋€例子（可以把它放在<head>標(biāo)簽中）：

<linkrel="stylesheet"type="text/css"media="screen"href="screenstyles.

css">

媒體查詢更進一步，不僅可以指定設(shè)備類型，還能指定設(shè)備的能力和特性?？梢詫⑵湎胂鬄閷g覽器的詢問。如果瀏覽器回答“是”，那么就會應(yīng)用對應(yīng)的樣式表。如果瀏覽器回答“否”，就不會應(yīng)用。除了問瀏覽器：“你是在有屏幕的設(shè)備上嗎？”（CSS2里只能如此），媒體查詢可以問更多細(xì)節(jié)，比如可以問：“你是在有屏幕的設(shè)備上，而且設(shè)備是垂直朝向的嗎？”下面看看代碼：

<linkrel="stylesheet"media="screenand(orientation:portrait)"

href="portrait-screen.css"/>

首先，媒體查詢表達(dá)式詢問了設(shè)備的類型（是屏幕設(shè)備嗎？），然后又詢問特性（你的屏幕是垂直方向嗎？）。顯然，樣式表portrait-screen.css會應(yīng)用給任何有屏幕且屏幕方向垂直的設(shè)備，而不符合這兩個條件的設(shè)備則不會獲得其樣式。如果在媒體查詢表達(dá)式的開頭添加一個not，就可以把詢問的條件反過來。比如，以下代碼的結(jié)果與前面的例子相反，只會將樣式表應(yīng)用給垂直朝向的非屏幕設(shè)備：

<linkrel="stylesheet"media="notscreenand(orientation:portrait)"

href="portrait-screen.css"/>

2.3組合媒體查詢可以將多個媒體查詢串在一起。比如，在前面一個示例的基礎(chǔ)上，可以進一步限制只把樣式表應(yīng)用給視口大于800像素的設(shè)備：

<linkrel="stylesheet"media="screenand(orientation:portrait)and

(min-width:800px)"href="800wide-portrait-screen.css"/>

此外，可以組合多個媒體查詢。只要其中任何一個媒體查詢表達(dá)式為真，就會應(yīng)用樣式；如果沒有一個為真，則樣式表沒用。下面看代碼：

<linkrel="stylesheet"media="screenand(orientation:portrait)and

(min-width:800px),projection"href="800wide-portrait-screen.css"/>

這里有兩點需要強調(diào)一下。首先，逗號分隔每個媒體查詢表達(dá)式。其次，在projection（投影機）之后沒有任何特性/值對。這樣省略特定的特性，表示適用于具備任何特性的該媒體類型。在這里，表示可以適用于任何投影機。沒錯，任何CSS長度單位都可以用來指定媒體查詢的條件。像素（px）是最常用的，而em或rem也都可以用。要了解這些單位的更多信息，可以參考我的一篇文章：\h/just-use-pixels。假設(shè)你想在800像素處設(shè)置斷點，但又想用em單位，可以用800除以16，就是50em。2.3.1@import與媒體查詢可以在使用@import導(dǎo)入CSS時使用媒體查詢，有條件地向當(dāng)前樣式表中加載其他樣式表。比如，以下代碼會導(dǎo)入樣式表phone.css，但條件是必須是屏幕設(shè)備，而且視口不超過360像素：

@importurl("phone.css")screenand(max-width:360px);

記住，使用CSS中的@import會增加HTTP請求（進而影響加載速度），因此請慎用。2.3.2在CSS中使用媒體查詢前面我們介紹在了<head>標(biāo)簽中引入CSS文件，以及通過@import引入CSS文件時使用媒體查詢，這兩種方式都是鏈接樣式的場景。但更常見的是在CSS文件內(nèi)部直接使用媒體查詢。比如，如果把以下代碼包含進一個樣式表，它會在屏幕設(shè)備的寬度為400像素及以下時把所有h1元素變成綠色：

@mediascreenand(max-device-width:400px){

h1{color:green}

}

首先使用@media規(guī)則聲明這是一個媒體查詢，然后指定匹配的設(shè)備類型。在前面的例子中，我們想把后面的樣式應(yīng)用給屏幕設(shè)備（而不是打印設(shè)備，即print）。然后在后面的括號中，進一步指定查詢條件。最后，跟編寫其他樣式一樣，把CSS規(guī)則寫在一對花括號中。此時此刻，我得敬告各位：多數(shù)情況下，并不需要指定screen。為什么呢？大家看規(guī)范是怎么說的：“在針對所有設(shè)備的媒體查詢中，可以使用簡寫語法，即省略關(guān)鍵字all（以及緊隨其后的and）。換句話說，如果不指定關(guān)鍵字，則關(guān)鍵字就是all。”因此，除非你真的想針對特定的媒體類型應(yīng)用樣式，否則就不要寫screenand了。后面的例子都會這么做。2.3.3媒體查詢可以測試哪些特性在響應(yīng)式設(shè)計中，媒體查詢中用得最多的特性是視口寬度（width）。就我個人的經(jīng)驗來看，很少需要用到其他設(shè)備特性（偶爾會用到分辨率和視口高度）。不過，為以防萬一，這里還是給出了媒體查詢3級規(guī)定的所有可用特性。但愿其中有些特性能引起你的興趣。width：視口寬度。height：視口高度。device-width：渲染表面的寬度（可以認(rèn)為是設(shè)備屏幕的寬度）。device-height：渲染表面的高度（可以認(rèn)為是設(shè)備屏幕的高度）。orientation：設(shè)備方向是水平還是垂直。aspect-ratio：視口的寬高比。16∶9的寬屏顯示器可以寫成aspect-ratio:16/9。color：顏色組分的位深。比如min-color:16表示設(shè)備至少支持16位深。color-index：設(shè)備顏色查找表中的條目數(shù)，值必須是數(shù)值，且不能為負(fù)。monochrome：單色幀緩沖中表示每個像素的位數(shù)，值必須是數(shù)值（整數(shù)），比如monochrome:2，且不能為負(fù)。resolution：屏幕或打印分辨率，比如min-resolution:300dpi。也可以接受每厘米多少點，比如min-resolution:118dpcm。scan：針對電視的逐行掃描（progressive）和隔行掃描（interlace）。例如720pHDTV（720p中的p表示progressive，即逐行）可以使用scan:progressive來判斷；而1080iHDTV（1080i中的i表示interlace，即隔行）可以使用scan:interlace來判斷。grid：設(shè)備基于柵格還是位圖。上面列表中的特性，除scan和grid外，都可以加上min或max前綴以指定范圍?？纯聪旅娴拇a：

@importurl("tiny.css")screenand(min-width:200px)and(maxwidth:

360px);

這里使用最大寬度（max-width）和最小寬度（min-width）設(shè)定了范圍。因此，tiny.css只在設(shè)備視口介于200像素和360像素之間時才會被應(yīng)用。CSS媒體查詢4級中廢棄的特性CSS媒體查詢4級草案中廢棄了一些特性，特別是device-height、device-width和device-aspect-ratio（參見：\h/media-queries-4/#mf-deprecated）。雖然已經(jīng)支持它們的瀏覽器還會繼續(xù)支持，但不建議在新寫的樣式表中再使用它們。2.4通過媒體查詢修改設(shè)計從原理上講，位于下方的CSS樣式會覆蓋位于上方的目標(biāo)相同的CSS樣式，除非上方的選擇符優(yōu)先級更高或者更具體。因此，可以在一開始設(shè)置一套基準(zhǔn)樣式，將其應(yīng)用給不同版本的設(shè)計方案。這套樣式表確保用戶的基準(zhǔn)體驗。然后再通過媒體查詢覆蓋樣式表中相關(guān)的部分。比如，如果是在一個很小的視口中，可以只顯示文本導(dǎo)航（或者用較小的字號），然后對于擁有較大空間的較大視口，則通過媒體查詢?yōu)槲谋緦?dǎo)航加上圖標(biāo)?，F(xiàn)在我們就看一個實際的例子（example_02-02）。首先是標(biāo)記：

<ahref="#"class="CardLinkCardLink_Hearts">Hearts</a>

<ahref="#"class="CardLinkCardLink_Clubs">Clubs</a>

<ahref="#"class="CardLinkCardLink_Spades">Spades</a>

<ahref="#"class="CardLinkCardLink_Diamonds">Diamonds</a>

接下來是CSS：

.CardLink{

display:block;

color:#666;

text-shadow:02px0#efefef;

text-decoration:none;

height:2.75rem;

line-height:2.75rem;

border-bottom:1pxsolid#bbb;

position:relative;

}

@media(min-width:300px){

.CardLink{

padding-left:1.8rem;

font-size:1.6rem;

}

}

.CardLink:before{

display:none;

position:absolute;

top:50%;

transform:translateY(-50%);

left:0;

}

.CardLink_Hearts:before{

content:"?";

}

.CardLink_Clubs:before{

content:"?";

}

.CardLink_Spades:before{

content:"?";

}

.CardLink_Diamonds:before{

content:"?";

}

@media(min-width:300px){

.CardLink:before{

display:block;

}

}

下載示例代碼如果你在Packt出版社購買了本文，可以登錄你的賬號下載本文示例代碼：\h。如果你是在別處買的，請訪問：\h/support，然后注冊并通過電子郵箱接收示例代碼。小視口下的效果如下圖所示：以下則是大視口中的效果：2.4.1任何CSS都可以放在媒體查詢里要知道，正常情況下我們編寫的任何CSS樣式，都可以放在媒體查詢里。因此，使用媒體查詢可以從整體上修改一個網(wǎng)站的布局和外觀（通常針對不同的視口大?。?。2.4.2針對高分辨率設(shè)備的媒體查詢媒體查詢的一個常見的使用場景，就是針對高分辨率設(shè)備編寫特殊樣式。比如：

@media(min-resolution:2dppx){

/*樣式*/

}

這里的媒體查詢只針對每像素單位為2點（2dppx）的屏幕。類似的設(shè)備有iPhone4的視網(wǎng)膜屏，以及其他很多高清屏的安卓機。減小dppx值，可以擴大這個媒體查詢的適用范圍。為支持更廣泛的設(shè)備，在使用min-resolution屬性時，需要加上適當(dāng)?shù)臑g覽器前綴，可以使用工具自動完成。不知道什么是瀏覽器前綴？下一章我們會詳細(xì)介紹。2.5組織和編寫媒體查詢的注意事項在這里，我們插一部分，談?wù)勗诰帉懞徒M織媒體查詢的時候都有哪些方式方法。這些方式方法各有利弊，但至少我們應(yīng)該知道它們，至于是否采用，那就是另一回事了。2.5.1使用媒體查詢鏈接不同的CSS文件從瀏覽器的角度看，CSS屬于“阻塞渲染”的資源。換句話說，瀏覽器需要下載并解析鏈接的CSS文件，然后再渲染頁面。不過，現(xiàn)代瀏覽器都很聰明，知道哪些樣式表（在頭部通過媒體查詢鏈接的樣式表）必須立即分析，而哪些樣式可以等到頁面初始渲染結(jié)束后再處理。在這些瀏覽器看來，不符合媒體查詢指定條件（比如屏幕比媒體查詢指定的?。┑腃SS文件可以延緩執(zhí)行（deferred），到頁面初始加載后再處理，以便讓用戶感覺頁面加載速度更快。關(guān)于這方面內(nèi)容，可以參考谷歌開發(fā)者網(wǎng)站的文章“阻塞渲染的CSS”1：\h/web/fundamentals/performance/critical-rendering-path/render-blocking-css（短鏈接：\h/Rqn0XEt）。1SamChen（\h/blog/）中文翻譯版，這里引用的文字直接采用了他的譯文?！g者注我想重點向大家介紹這一段：“請注意，「阻塞渲染」僅是指該資源是否會暫停瀏覽器的首次頁面渲染。無論CSS是否阻塞渲染，CSS資源都會被下載，只是說非阻塞性資源的優(yōu)先級比較低而已?！痹購娬{(diào)一次，所有鏈接的文件都會被下載下來，只是如果有的文件不必立即應(yīng)用，那瀏覽器就不會讓它影響頁面的渲染。因此，如果瀏覽器要加載的響應(yīng)式頁面（參見example_02-03）通過不同的媒體查詢鏈接了4個不同的樣式表（分別為不同視口的設(shè)備應(yīng)用樣式），那它就會下載4個CSS文件，但在渲染頁面之前，它只會解析那個針對當(dāng)前視口大小的樣式表。2.5.2分隔媒體查詢的利弊編寫多個媒體查詢分別對應(yīng)不同的樣式表雖然有好處，但有時候也不一定（不算個人喜好或代碼分工的需要）。多一個文件就要多一次HTTP請求，在某些條件下，HTTP請求多了會明顯影響頁面加載速度。Web開發(fā)可不是件容易的事兒！此時應(yīng)該關(guān)注的是網(wǎng)站的整體性能，最好在不同設(shè)備上對不同的情形都做相應(yīng)測試，比較之后再決定。我對這件事的看法是，除非有充裕的時間讓你去做性能優(yōu)化，否則我一般都不會指望在這方面獲取性能提升。我會首先確認(rèn)：所有圖片都壓縮過了；所有腳本都拼接和縮短了；所有資源都采用了gzip壓縮；所有靜態(tài)內(nèi)容都緩存到了CDN；所有多余的CSS規(guī)則都被清除了。之后，我才可能會考慮，為了再提升一些性能，是否需要把媒體查詢分隔開，讓它們分別引用不同的CSS文件。gzip是一種壓縮和解壓縮的文件格式。主流一點的服務(wù)器都支持gzip壓縮CSS，從而讓服務(wù)器發(fā)送給設(shè)備的文件明顯“瘦身”（到了設(shè)備之后，再解壓縮成原來的格式）。關(guān)于gzip的更多信息，請參考維基百科：\h/wiki/Gzip。2.5.3把媒體查詢寫在常規(guī)樣式表中除非在極端情況下，否則我都建議在既有的樣式表中寫媒體查詢，跟常規(guī)的規(guī)則寫在一起。如果你也是這樣想的，那么還有一個問題需要考慮：是該把媒體查詢聲明在相關(guān)的選擇符下面，還是該把相同的媒體查詢并列起來，每個媒體查詢單獨一塊？這個問題問得好啊。2.6組合媒體查詢還是把它們寫在需要的地方我個人喜歡把媒體查詢寫在需要它的地方。比如，我想根據(jù)視口大小在樣式表中的幾個地方改變幾個元素的寬度，我會這樣做：

.thing{

width:50%;

}

@mediascreenand(min-width:30rem){

.thing{

width:75%;

}

}

/*這里是另外一些樣式規(guī)則*/

.thing2{

width:65%;

}

@mediascreenand(min-width:30rem){

.thing2{

width:75%;

}

}

這樣寫看起來有點蠢，兩個媒體查詢的條件相同，都針對屏幕最小寬度為30rem的情況。像這樣重復(fù)寫兩遍@media真的是冗余和浪費嗎？難道不該把針對相同條件的CSS規(guī)則都組織到一個媒體查詢塊里嗎？像這樣：

.thing{

width:50%;

}

.thing2{

width:65%;

}

@mediascreenand(min-width:30rem){

.thing{

width:75%;

}

.thing2{

width:75%;

}

}

當(dāng)然這也是一種方式。不過，從維護代碼的角度看，這種寫法不利于維護。當(dāng)然兩種寫法都對，只是我比較傾向于針對某個選擇符寫一些規(guī)則，然后如果該規(guī)則需要視條件而變，那我就把相應(yīng)的媒體查詢緊接著寫在它的下面。這樣在需要查找與某個選擇符相關(guān)的規(guī)則時，就不用再從一個一個的代碼塊里找了。有了CSS預(yù)處理器和后處理器，這個做法還可以更簡便，因為可以將某個規(guī)則的媒體查詢“變體”直接嵌到規(guī)則當(dāng)中。我的另一本文《Sass和Compass設(shè)計師指南》中專門有一節(jié)是寫這方面的，大家可以參考。對于這種寫媒體查詢的方式，你說它會造成冗余是絕對沒錯的。單從控制文件大小的角度說，難道這樣寫媒體查詢的做法真的不可取嗎？沒錯，誰也不希望CSS文件過度膨脹。但事實上gzip壓縮（應(yīng)該用它來壓縮服務(wù)器上的所有可以壓縮的資源）完全可以把差別降到可以忽略不計的程度。我之前做過很多這方面的測試，要是你有興趣，可以看看：\h/inline-or-combined-media-queries-in-sass-fight/?？傊?，在標(biāo)準(zhǔn)樣式之后緊接著寫媒體查詢，根本用不著擔(dān)心文件大小。如果你想在原始的規(guī)則后面直接寫媒體查詢，但希望把所有條件相同的媒體查詢合并成一個，其實可以使用構(gòu)建工具，比如在寫作本文時Grunt和Gulp就有相關(guān)插件可以幫你做到這一點。2.7關(guān)于視口的meta標(biāo)簽為了利用媒體查詢，應(yīng)該讓小屏幕以其原生大小來顯示網(wǎng)頁，而不是先在980像素寬的窗口中渲染好，讓用戶去放大或縮小。2007年，蘋果在發(fā)布iPhone的時候，就引入了一個針對視口的meta標(biāo)簽。目前安卓機和其他手機基本都支持這個標(biāo)簽了。這個用于視口的meta標(biāo)簽，是網(wǎng)頁與移動瀏覽器的接口。網(wǎng)頁通過這個標(biāo)簽告訴移動瀏覽器，它希望瀏覽器如何渲染當(dāng)前頁面。在可以預(yù)見的未來，任何響應(yīng)式的希望在小屏幕設(shè)備上好好顯示的網(wǎng)頁，都必須添加這個meta標(biāo)簽。在模擬器和仿真器中測試響應(yīng)式設(shè)計雖然最好是在真實的設(shè)備上測試，但有時候使用安卓仿真器和iOS模擬器更方便。模擬器就是用于模擬相關(guān)設(shè)備的，而仿真器則會嘗試實際地解釋原始的設(shè)備代碼。安卓面向Windows、Linux和Mac提供了仿真器，都在可以免費下載安裝的安卓SDK里：\h/sdk。iOS模擬器只能為MacOSX用戶提供便利，包含在Xcode中（可以在MacAppStore中免費下載）。瀏覽器通常也有不錯的模擬移動設(shè)備的工具，一般在開發(fā)者工具里面。比如，F(xiàn)irefox和Chrome都支持模擬很多移動設(shè)備/視口。這個視口<meta>標(biāo)簽應(yīng)該放在HTML的<head>標(biāo)簽中?？梢栽谄渲性O(shè)置具體的寬度（比如使用像素單位），或者設(shè)置一個比例（比如2.0，即實際大小的兩倍）。下面這行代碼設(shè)置以內(nèi)容實際大小的兩倍（百分之二百）顯示：

<metaname="viewport"content="initial-scale=2.0,width=device-width"

/>

好，現(xiàn)在我們分析一下前面的<meta>標(biāo)簽。首先，name="viewport"表示針對視口，這不用說了。接著content="initial-scale=2.0"的意思是“把內(nèi)容放大為實際大小的兩倍”（0.5就是一半，3.0就是三倍）。最后，width=device-width告訴瀏覽器頁面的寬度等于設(shè)備的寬度（width=device-width）。通過這個<meta>標(biāo)簽還可以控制用戶可以縮放頁面的程度。下面的例子允許用戶最大將頁面放大到設(shè)備寬度的三倍，最小可以將頁面縮小至設(shè)備寬度的一半。

<metaname="viewport"content="width=device-width,maximum-scale=3,

minimum-scale=0.5"/>

甚至可以完全禁止用戶縮放。雖然允許縮放是一個重要的無障礙特性，但現(xiàn)實當(dāng)中很少有必要這么做：

<metaname="viewport"content="initial-scale=1.0,user-scalable=no"/>

其中，user-scalable=no是禁止用戶縮放的。沒錯，我們把initial-scale又改回了1.0，意思是讓移動瀏覽器在其視口的寬度中渲染網(wǎng)頁。將width設(shè)置為device-width就是要在所有支持的移動瀏覽器中，以百分之百的視口寬度來渲染頁面。大多數(shù)情況下，都可以使用這個meta標(biāo)簽：

<metaname="viewport"content="width=device-width,initial-scale=1.0"

/>

在看到視口meta標(biāo)簽被越來越多地使用之后，W3C嘗試在CSS中引入能達(dá)到相同目的的特性，參考鏈接\h/csswg/css-device-adapt/中關(guān)于新@viewport聲明的內(nèi)容。意思就是以后可以不用在<head>里寫<meta>標(biāo)簽了，而是可以代之以在CSS中寫@viewport{width:320px;}。這同樣可以將瀏覽器寬度設(shè)置為320像素。不過，目前還沒有多少瀏覽器支持這個CSS特性?？紤]到面向未來，可以同時使用meta標(biāo)簽和@viewport聲明?，F(xiàn)在，讀者對什么是媒體查詢以及如何使用媒體查詢已經(jīng)有了足夠的了解了。在討論另一個話題之前，我想讓大家知道媒體查詢的下一個版本會是什么樣的。2.8媒體查詢4級在本文寫作時，CSS媒體查詢4級（CSSMediaQueriesLevel4）還是草案（\h/csswg/mediaqueries-4/），其中的新特性還沒有多少瀏覽器支持。換句話說，雖然我們會在這里介紹它們，但將來它們很可能還會改變。請大家在真正使用這些新特性時，仔細(xì)研究一下瀏覽器支持情況以及語法是否正確。目前來說，我們只想在這里介紹4級中的可編程（scripting）、指針與懸停、亮度（luminosity）。2.8.1可編程的媒體特性通常，如果瀏覽器里沒有JavaScript，我們會給某個HTML標(biāo)簽添加一個類，而在JavaScript出現(xiàn)時再替換該類。這樣就可以根據(jù)這個HTML類來決定要加載什么代碼（及CSS）。最常見的場景是通過這種方式為啟用JavaScript的用戶編寫特有的CSS規(guī)則。這個做法有時候會誤導(dǎo)人。比如，默認(rèn)情況下的HTML標(biāo)簽是這樣的：

<htmlclass="no-js">

如果JavaScript在這個頁面中運行了，則它要做的第一件事就是替換這個類：

<htmlclass="js">

然后，我們就可以只針對支持JavaScript的瀏覽器編寫相應(yīng)的樣式了。比如：.js.header{display:block;}。CSS媒體查詢4級致力于為這個做法在CSS中提供更標(biāo)準(zhǔn)的實現(xiàn)方式：

@media(scripting:none){

/*沒有JavaScript時的樣式*/

}

可以使用JavaScript時：

@media(scripting:enabled){

/*有JavaScript時的樣式*/

}

最后，這個新規(guī)范還為僅開始時可以使用JavaScript提供了一個值。規(guī)范中針對這個值給出的例子，就是打印頁面時，一開始可以使用JavaScript來排版，然后就沒有JavaScript可用了。此時，可以這樣寫CSS：

@media(scripting:initial-only){

/*JavaScript只在一開始有效的樣式*/

}

可以通過以下鏈接看到這個特性的官方解釋：\h/csswg/mediaqueries-4/#mf-scripting。2.8.2交互媒體特性以下是W3C對指針媒體特性的描述：“指針媒體特性用于查詢鼠標(biāo)之類的指針設(shè)備是否存在，以及存在時其精確的位置。如果設(shè)備有多種輸入機制，指針媒體特性必須反映由用戶代理決定的‘主’輸入機制的特征?！敝羔樚匦杂腥齻€值：none、coarse和fine。co