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

響應式Web設計（HTML5和CSS3實戰(zhàn)）第2版目錄\h第1章響應式Web設計基礎\h1.1定義需求\h1.2什么是響應式Web設計\h響應式Web設計的由來\h1.3瀏覽器支持\h關于工具和文本編輯器\h1.4第一個響應式的例子\h1.4.1HTML\h1.4.2圖片\h1.4.3媒體查詢\h1.5示例的不足之處\h1.6小結\h第2章媒體查詢\h2.1為什么響應式Web設計需要媒體查詢\hCSS中基本的條件邏輯\h2.2媒體查詢的語法\h在link標簽中使用媒體查詢\h2.3組合媒體查詢\h2.3.1@import與媒體查詢\h2.3.2在CSS中使用媒體查詢\h2.3.3媒體查詢可以測試哪些特性\h2.4通過媒體查詢修改設計\h2.4.1任何CSS都可以放在媒體查詢里\h2.4.2針對高分辨率設備的媒體查詢\h2.5組織和編寫媒體查詢的注意事項\h2.5.1使用媒體查詢鏈接不同的CSS文件\h2.5.2分隔媒體查詢的利弊\h2.5.3把媒體查詢寫在常規(guī)樣式表中\(zhòng)h2.6組合媒體查詢還是把它們寫在需要的地方\h2.7關于視口的meta標簽\h2.8媒體查詢4級\h2.8.1可編程的媒體特性\h2.8.2交互媒體特性\h2.8.3懸停媒體特性\h2.8.4環(huán)境媒體特性\h2.9小結\h第3章彈性布局與響應式圖片\h3.1將固定像素大小轉換為彈性比例大小\h3.1.1為什么需要Flexbox\h3.1.2行內塊與空白\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不同媒體查詢中的不同Flexbox布局\h3.3.5行內伸縮\h3.3.6Flexbox的對齊\h3.3.7flex\h3.3.8簡單的粘附頁腳\h3.3.9改變原始次序\h3.3.10Flexbox小結\h3.4響應式圖片\h3.4.1響應式圖片的固有問題\h3.4.2通過srcset切換分辨率\h3.4.3srcset及sizes聯合切換\h3.4.4picture元素\h3.5小結\h第4章HTML5與響應式Web設計\h4.1得到普遍支持的HTML5標記\h4.2開始寫HTML5網頁\h4.2.1doctype\h4.2.2HTML標簽與lang屬性\h4.2.3指定替代語言\h4.2.4字符編碼\h4.3寬容的HTML5\h4.3.1理性編寫HTML5\h4.3.2向<a>標簽致敬\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響應式HTML5視頻與內嵌框架\h4.11關于“離線優(yōu)先”\h4.12小結\h第5章CSS3新特性\h5.1沒人無所不知\h5.2剖析CSS規(guī)則\h5.3便捷的CSS技巧\hCSS響應式多列布局\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屬性選擇符選擇以數值開頭的ID和類\h5.7CSS3結構化偽類\h5.7.1:last-child\h5.7.2nth-child\h5.7.3理解nth\h5.7.4基于nth的選擇與響應式設計\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實現Web字體\h5.11.3注意事項\h5.12CSS3的新顏色格式及透明度\h5.12.1RGB\h5.12.2HSL\h5.12.3alpha通道\h5.12.4CSSColorModuleLevel4的顏色操作\h5.13小結\h第6章CSS3高級技術\h6.1CSS3的文字陰影特效\h6.1.1省略blur值\h6.1.2多文字陰影\h6.2盒陰影\h6.2.1內陰影\h6.2.2多重陰影\h6.2.3陰影尺寸\h6.3背景漸變\h6.3.1線性漸變語法\h6.3.2徑向漸變背景\h6.3.3為響應式而生的關鍵字\h6.4重復漸變\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小結\h第7章SVG與響應式Web設計\h7.1SVG的歷史\h7.2用文檔表示的圖像\h7.2.1SVG的根元素\h7.2.2命名空間\h7.2.3標題和描述標簽\h7.2.4defs標簽\h7.2.5元素g\h7.2.6SVG形狀元素\h7.2.7SVG路徑\h7.3使用流行的圖像編輯工具和服務創(chuàng)建SVG\h利用SVG圖標服務\h7.4在Web頁面中插入SVG\h7.4.1使用img標簽\h7.4.2使用object標簽\h7.4.3把SVG作為背景圖像插入\h7.4.4關于dataURI的簡短介紹\h7.4.5生成圖像精靈\h7.5內聯SVG\h7.5.1利用符號復用圖形對象\h7.5.2根據上下文改變內聯SVG顏色\h7.5.3復用外部圖形對象資源\h7.6不同插入方式下可以使用的功能\h瀏覽器兼容性問題\h7.7SVG的怪癖\h7.7.1SMIL動畫\h7.7.2使用外部樣式表為SVG添加樣式\h7.7.3使用內聯樣式為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實現技巧\h7.11.2更多資料\h7.12小結\h第8章CSS3過渡、變形和動畫\h8.1什么是CSS3過渡以及如何使用它\h8.1.1過渡相關的屬性\h8.1.2過渡的簡寫語法\h8.1.3在不同時間段內過渡不同屬性\h8.1.4理解過渡調速函數\h8.1.5響應式網站中的有趣過渡\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小結\h第9章表單\h9.1HTML5表單\h9.2理解HTML5表單中的元素\h9.2.1placeholder\h9.2.2required\h9.2.3autofocus\h9.2.4autocomplete\h9.2.5list及對應的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小結\h第10章實現響應式Web設計\h10.1盡快讓設計在瀏覽器和真實設備上運行起來\h讓設計決定斷點\h10.2在真實設備上觀察和使用設計\h10.3擁抱漸進增強\h10.4確定需要支持的瀏覽器\h10.4.1等價的功能，而不是等價的外觀\h10.4.2選擇要支持的瀏覽器\h10.5分層的用戶體驗\h實現體驗分層\h10.6將CSS斷點與JavaScript聯系起來\h10.7避免在生產中使用CSS框架\h10.8采用務實的解決方案\h使用鏈接代替按鈕\h10.9盡可能使用最簡單的代碼\h10.10根據視口隱藏、展示和加載內容\h將復雜的可視化工作交給CSS\h10.11驗證器和代碼檢測工具\h10.12性能\h10.13下一個劃時代的產物\h10.14小結

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

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

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

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

img{

max-width:100%;

}

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

@mediascreenand(min-width:50em){

/*樣式*/

}

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

@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;

}

}

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

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

}

}

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

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

css">

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

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

href="portrait-screen.css"/>

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

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

href="portrait-screen.css"/>

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

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

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

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

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

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

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

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

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

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

h1{color:green}

}

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

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

360px);

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

<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樣式，都可以放在媒體查詢里。因此，使用媒體查詢可以從整體上修改一個網站的布局和外觀（通常針對不同的視口大?。?。2.4.2針對高分辨率設備的媒體查詢媒體查詢的一個常見的使用場景，就是針對高分辨率設備編寫特殊樣式。比如：

@media(min-resolution:2dppx){

/*樣式*/

}

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

.thing{

width:50%;

}

@mediascreenand(min-width:30rem){

.thing{

width:75%;

}

}

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

.thing2{

width:65%;

}

@mediascreenand(min-width:30rem){

.thing2{

width:75%;

}

}

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

.thing{

width:50%;

}

.thing2{

width:65%;

}

@mediascreenand(min-width:30rem){

.thing{

width:75%;

}

.thing2{

width:75%;

}

}

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

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

/>

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

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

minimum-scale=0.5"/>

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

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

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

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

/>

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

<htmlclass="no-js">

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

<htmlclass="js">

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

@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對指針媒體特性的描述：“指針媒體特性用于查詢鼠標之類的指針設備是否存在，以及存在時其精確的位置。如果設備有多種輸入機制，指針媒體特性必須反映由用戶代理決定的‘主’輸入機制的特征。”指針特性有三個值：none、coarse和fine。co