關于作者譯者序前言第1章HTML5、CSS3和響應式網頁設計入門1.1為什么智能很重要〔而老版的IE不再重要〕1.2響應式設計一定是最正確選擇嗎1.3響應式網頁設計的定義1.4為什么要在響應式設計上停滯不前1.5響應式網頁設計例如1.5.1下載視口調試工具1.5.2在線創意源泉1.6為什么HTML5很優秀1.6.1省時省力1.6.2新增了語義化標簽元素1.7CSS3為響應式設計和更多創新奠定了根底1.7.1底線：CSS3不破壞任何東西1.7.2CSS3如何解決日常設計問題1.8看吶，不用圖片CSS3還帶來了什么1.9HTML5和CSS3現在就能用嗎1.10響應式網頁設計不是靈丹妙藥1.11引導客戶：網站不必在所有瀏覽器中表現一致1.12小結第2章媒體查詢：支持不同的視口2.1現在就能使用媒體查詢2.2為什么響應式設計需要媒體查詢2.2.1媒體查詢語法2.2.2媒體查詢能檢測那些特性2.2.3用媒體查詢改造我們的設計2.2.4加載媒體查詢的最正確方法2.3我們的第一個響應式設計2.3.1我們的設計是固定寬度的，不要驚訝2.3.2響應式設計中要保證圖片盡可能精簡2.3.3小視口下的內容剪切2.4阻止移動瀏覽器自動調整頁面大小2.5針對不同視口寬度修正設計2.6響應式設計中內容始終優先2.7媒體查詢只是必要條件之一我們需要流動布局2.8小結第3章擁抱流式布局3.1固定布局經不起未來考驗3.2為什么響應式設計需要百分比布局3.3將網頁從固定布局修改為百分比布局3.3.1需要牢記的公式3.3.2設置百分比元素的上下文3.3.3必須時刻牢記上下文3.4用em替換px3.5彈性圖片3.5.1讓圖片隨視口縮放3.5.2為特定圖片指定特定規那么3.5.3給彈性圖片設置閾值3.5.4超級全能的max-width屬性3.6為不同的屏幕尺寸提供不同的圖片設置自適應圖片把背景圖片放在其他地方3.7流動網格布局和媒體查詢的默契配合3.8CSS網格系統使用網格系統快速搭建網站3.9小結第4章響應式設計中的HTML54.1HTML5的哪些局部現在就能用4.1.1大多數網站可以用HTML5編寫4.1.2膩子腳本和Modernizr4.2如何編寫HTML5網頁4.2.1HTML5的精簡之道4.2.2HTML5標簽的合理寫法4.2.3偉大的<a>標簽萬歲4.2.4HTML的廢棄零件4.3HTML5的全新語義化元素4.3.1<section>4.3.2<nav>4.3.3<article>4.3.4<aside>4.3.5<hgroup>HTML5的大綱結構算法4.3.6<header>4.3.7<footer>4.3.8<address>4.4HTML5結構元素的實際用法網站的主體內容怎么辦？4.5HTML5的文本級語義元素4.5.1<b>4.5.2<em>4.5.3<i>4.5.4在頁面中應用文本層語義元素4.6遵循WAI-ARIA實現無障礙站點ARIA的地標角色4.7在HTML5中嵌入媒體4.8用HTML5的方法為頁面添加視頻或音頻4.8.1提供備用的媒體源文件4.8.2針對老版本瀏覽器的備用方案4.8.3<audio>和<video>標簽的用法根本一致4.9響應式視頻4.10離線Web應用4.10.1離線Web應用概述4.10.2讓網頁可離線使用4.10.3理解manifest文件4.10.4頁面被自動加載到離線緩存4.10.5版本注釋的用途4.10.6離線訪問網站4.10.7離線Web應用的故障診斷4.11小結第5章CSS3：選擇器、字體和顏色模式5.1CSS3給前端開發人員帶來了什么5.1.1InternetExplorer6到8對CSS3的支持5.1.2使用CSS3設計和開發頁面5.2CSS規那么解析5.3私有前綴及其用法5.4快速而有效的CSS技巧5.4.1CSS3多欄布局增加欄位間隙和分割線5.4.2文字換行5.5CSS3的新增選擇器及其用法5.5.1CSS3屬性選擇器1.CSS3的子字符串匹配屬性選擇器2.一個活生生的例子5.5.2CSS3結構偽類1.:last-child選擇器2.nth-child選擇器3.理解nth規那么的作用4.否認〔:not〕選擇器5.5.3對偽元素的修正:first-line對響應式設計來說好用嗎5.6自定義網頁字體5.6.1@font-face規那么5.6.2使用@font-face嵌入網頁字體5.7幫幫我，標題模糊怎么辦在響應式設計中使用自定義@font-face字體的考前須知5.8新的CSS3顏色格式和透明度5.8.1RGB顏色5.8.2HSL顏色5.8.3針對IE6、IE7和IE8提供備用顏色值5.8.4透明通道5.9小結第6章用CSS3創造令人驚艷的美6.1文字陰影6.1.1HEX、HSL或RGB顏色都可以6.1.2px、em或rem都行6.1.3取消文字陰影左上方陰影6.1.4制作浮雕文字陰影效果6.1.5多重文字陰影6.2盒陰影6.2.1內陰影6.2.2多重陰影6.3背景漸變6.3.1線性背景漸變分解線性漸變語法6.3.2徑向背景漸變分解徑向漸變語法6.3.3重復漸變6.4背景漸變圖案6.5CSS3的響應性6.6組合使用CSS3屬性6.7多重背景圖片6.7.1背景圖片大小6.7.2背景圖片位置6.7.3背景屬性的縮寫語法6.8更多CSS特性6.9可縮放圖標：響應式設計中的完美選擇6.10小結第7章CSS3過渡、變形和動畫7.1什么是CSS3過渡以及如何使用它7.1.1過渡相關的屬性1.過渡的簡寫語法2.在不同時間段內過渡不同屬性3.理解過渡調速函數7.1.2響應式網站中的有趣過渡7.2CSS3的2D變形我們能做哪些變形1.scale2.translate3.rotate4.skew5.matrix6.transform-origin屬性7.3嘗試CSS3的3D變形7.3.1分析3D變形效果7.3.23D變形尚未成熟7.4CSS3動畫效果組合使用CSS3變形和動畫7.5小結第8章用HTML5和CSS3征服表單8.1HTML5表單8.1.1理解HTML5表單中的元素8.1.2placeholder8.1.3required8.1.4autofocus8.1.5autocomplete8.1.6list〔及對應的datalist元素〕8.1.7HTML5的新輸入類型1.email2.number3.url4.tel5.search6.pattern7.color8.1.8日期和時間輸入類型1.date2.month3.week4.time5.datetime和datetime-local6.range8.2如何給不支持新特性的瀏覽器打補丁8.3使用CSS3美化HTML5表單針對表單的CSS3偽類選擇器8.4小結第9章解決跨瀏覽器問題9.1漸進增強與優雅降級現狀9.2該不該修復老版本IE9.2.1統計數據〔再看看世界的變化〕9.2.2個人選擇9.3前端的瑞士軍刀：Modernizr9.3.1使用Modernizr輔助修正樣式問題9.3.2使用Modernizr讓老版本IE支持HTML5元素9.3.3給IE6、7、8追加min/max媒體查詢功能9.3.4使用Modernizr按需加載資源9.4必要時將導航鏈接轉換為下拉菜單9.5高分辨率設備〔未來趨勢〕9.6小結附錄附錄1：響應式Web設計〔HTML5和CSS3〕工具集附錄2：響應式Web設計〔HTML5和CSS3〕范例網站附錄3：本書涉及的HTML5及CSS3標準索引附錄4：本書提到的電影索引關于作者BenFrain是一名具有十多年經驗的網頁設計師和前端工程師，直接與世界各地的客戶和設計機構并肩工作。同時他還是一名技術記者，定期為一些關注Mac平臺、前沿科技、網頁設計和航空技術的刊物撰稿。在此之前，他曾是一名懷才不遇的〔而且謙虛的〕電視演員，畢業于索爾福德大學的媒體與表演專業。他寫了四部〔個人認為〕同樣被低估的劇本，而且始終心懷能賣出一部的信念〔盡管不像最初那么強烈了〕。工作之余，在身體〔和妻子〕允許的情況下，他喜歡玩室內足球。他的個人網站是，Twitter地址是twitter/benfrain。首先要感謝網絡社區。沒有大家集思廣益的才智、慷慨大方的文檔和開放共享的解決方案，我不可能在互聯網行業做出現在這點還稍稍令我自豪的事情。其次，我要感謝響應式網頁設計之父EthanMarcotte。他和我從未謀面或交談過，但他的方法論現在每時每刻都在影響著我制作網頁的方法。毫無疑問，假設有哪些地方造成讀者對響應式方法論的誤解，那都要怪我自己表達不好。最后，感謝我的家人。看過〔同樣被低估的〕《義海傾情》1的人都知道：“血濃于水。其他人都是陌生人。〞1《義海傾情》WyattEarp：〕。——譯者注譯者序蒂姆·伯納斯-李在1991年制作并發布了第一個網站，如今剛剛過去21個年頭。在這21年里，計算機和互聯網快速開展，這個世界的面貌也日新月異。在這個過程中，網頁設計從無到有，從簡單漸至專業，從可有可無變為廣受關注。網頁設計方法也在跟隨時代不斷創新，從最初簡單的文字排版，到表格布局，再到DIV+CSS，直到現在廣為流行的網格布局、流式布局等，設計師和開發者們一直致力于為全球網民提供更好的設計觀感和使用體驗。iOS和Android的發布，掀起了移動互聯網的浪潮，智能、平板電腦、智能家電等新設備層出不窮，我們的世界變得更加精彩紛呈。但這卻給網頁設計帶來了新的挑戰，在面對形形色色的終端設備、千差萬別的屏幕分辨率，以及良莠不齊的網絡連接質量時，目前的設計方法顯得力不從心。我們無法預料用戶的設備和網絡狀況，更不可能為每種設備專門設計一套網站，那么在移動互聯網時代，如何創新為用戶提供更好的設計和體驗呢？2023年5月25日，伊桑·馬科特發表在AListApart上的一篇文章，為我們翻開了思路。在這篇名為《ResponsiveWebDesign》的文章中，伊桑·馬科特將三種已有的技術整合在一起，提出了響應式網頁設計的概念，用以解決我們當前遇到的設計難題。響應式網頁設計概念一經提出就大受歡送〔當然也有爭議〕，很多設計師和開發者紛紛實踐并完善這種理念。兩年多的時間里，涌現出了越來越多的響應式網站，針對響應式設計的工具和資源也日漸豐富。截至目前，響應式設計是使用一套代碼為各類設備提供良好設計效果和使用體驗的最正確設計方法。你肯定對響應式設計有所耳聞，也可能看過一些響應式設計的技巧或相關文章，但它們都零零散散不成體系，無法讓你真正理解并掌握響應式設計，也無法指導你立即開始響應式設計的實踐。這本書將會帶你系統地學習響應式網頁設計的方法論，書中涵蓋了響應式設計的思想、方法、工具、技巧、HTML5、CSS3、相關資源，以及針對老版本瀏覽器的兼容方案等內容，并以實際案例循序漸進地講解了如何創立一個優雅高效易于維護的響應式網站。希望這些正是你所需要的。“得功有法，秉一應萬〞，這是太極拳修煉的目標，我想也可以作為響應式設計的目標。修煉好響應式設計這門功夫，能夠讓你安然自在，以一應萬。元芳，潛心修煉吧！感謝裕波、楊海玲老師及朱巍老師，讓我有時機翻譯本書。非常感謝圖靈各位編輯的辛勤工作，尤其感謝李松峰老師的細心指導。另外要感謝圖靈社區，我在這里受益匪淺。最后，感謝我的老婆，本書的翻譯離不開她的支持、監督與參謀。我在翻譯本書時盡力保證信與達，雅那么不敢奢望。翻譯中的錯誤在所難免，歡送廣闊讀者指正。如果對本書有任何意見、建議或想法，請發送郵件至wyqbailey@gmail或反應至圖靈社區。王永強2023年10月成都前言如果你想給自己的網站做一個單獨的“版〞，請三思而后行！響應式網頁設計提供了一種設計方法，可以使同一網站在智能、桌面電腦，以及介于這兩者之間的任意設備上完美顯示。這種方法能夠根據用戶的屏幕尺寸，合理地為現有及將來的各種設備提供最正確的瀏覽體驗。本書提供了一整套方法，用來將一個現有的固定寬度的網站設計變成響應式的。此外，本書應用HTML5和CSS3提供的最新最有用的技術，擴展了響應式網頁設計的方法論，以便網站更簡潔、更易于維護。本書還講解了編寫和發布代碼、圖片、文件的最正確實踐。只要你懂HTML和CSS，你就能制作響應式網站。本書內容第1章，HTML5、CSS3和響應式網頁設計入門，定義了什么是響應式網頁設計，展示了一些響應式設計的網站例如，重點強調了使用HTML5和CSS3的優勢。第2章，媒體查詢：支持不同的視口，講解了什么是媒體查詢，如何實現媒體查詢，以及如何針對設備能力匹配CSS樣式，將其應用于任意設計。第3章，擁抱流式布局，講解了流式布局的優點，以及如何將一個現有的固定寬度設計輕松地轉換為流式布局，怎樣使用CSS框架快速搭建響應式網頁。第4章，響應式設計中的HTML5，探討了使用HTML5技術的諸多好處，比方更簡潔的代碼、語義化標簽、離線存儲，以及無障礙網頁應用輔助技術。第5章，CSS3：選擇器、字體和顏色模式，展示了CSS3選擇器的強大威力，可以讓你輕松地指定和改變任何元素。還講解了通過@font-face聲明來使用漂亮的網絡字體，另外講解了新的CSS3顏色模式如RGB(A)和HSL(A)。第6章，用CSS3創造驚艷的美，展示了如何使用純粹的CSS3代碼實現文字陰影、盒陰影和漸變效果。還涵蓋了如何使用多重背景圖片，以及如何通過字體文件創立圖標。第7章，CSS3的過渡、變形和動畫，講解如何僅使用CSS3來創立和轉換屏幕上的元素，并制作動畫效果。第8章，用HTML5和CSS3征服表單，闡述了在所有設備上〔從最新的智能到桌面版瀏覽器〕都能良好運行的跨瀏覽器表單開發技巧。第9章，解決跨瀏覽器問題，講解了如何保證老版本的InternetExplorer可響應，如何將一組鏈接修改成移動設備上的一個菜單，如何為高分辨率顯示器提供不同內容，以及如何使用Modernizr框架分條件地加載資源文件。準備工作你必須對HTML和CSS很熟悉。有一點JavaScript根底會很有幫助。良好的電影品味也很有益處。本書讀者你是否正在開發兩套網站，一套給移動設備，一套給大顯示器？又或者你已聽說過“響應式網頁設計〞但卻不確定如何將HTML5、CSS3和響應式設計融合在一起？如果是，那么本書可以讓你在所有競爭對手之前，將你的網站提升到一個更高層次。本書面向那些正在使用HTML4.01和CSS2.1開發固定寬度網站的網頁設計師和開發人員，講解了如何使用HTML5和CSS3制作可適應任意屏幕尺寸設備的響應式網站。本書約定本書中使用幾種不同的文字樣式來區分不同類型的信息，具體約定如下。正文中的代碼使用如下格式：“HTML5接受寬松語法，例如<sCRiptSrC=js/jquery-1.6.2.js></script>這樣的語句也是有效的。〞代碼段使用如下格式：<divclass="header"><divclass="navigation"><ulclass="nav-list"><li><ahref="#"title="Home">Home</a></li><li><ahref="#"title="About">About</a></li></ul></div><!—endofnavigation--></div><!—endofheader-->當要專門強調代碼塊中的某一局部時，那么對相關行或條目使用粗體格式：[編者注：網頁格式無法實現此效果。]#wrapper{margin-right:auto;margin-left:auto;width:96%;/*最外圍的DIV*/}#header{margin-right:10px;margin-left:10px;width:97.9166667%;/*940÷960*/}新術語，以及重要詞匯也使用粗體。文中提到的那些菜單、對話框中的文字，會使用粗體或大寫來標注，如：“導航按鈕不再做背景色切換，內容區的THESESHOULDHAVEWON按鈕和側邊欄的詳細信息按鈕消失了，而字體也與設計文檔相差甚遠。〞！這個圖標表示警告或重要提醒。￥這個圖標表示提示或技巧。讀者反應我們時刻歡送你的反應，以便了解你對本書的看法。你的珍貴意見有助于我們提升書籍的質量。一般的閱讀反應，可直接發送電子郵件至feedback@packtpub，請在郵件標題中注明書名。如果你在某個領域內有專長且有興趣編寫相關書籍，請訪問packtpub/authors查看作者指南。客戶支持現在你已是Packt圖書的尊貴讀者了，我們有一系列的售后支持，保證你的消費物有所值。錯誤盡管我們已經對書籍作了仔細校對以保證內容準確，但錯誤在所難免。如果在書中發現任何的文字或代碼錯誤，非常歡送你將這些錯誤提交給我們，這樣可以幫助我們在后續版本中改正錯誤，防止其他讀者產生不必要的誤解。一旦發現錯誤，請登錄://packtpub/support，選擇書名，點擊erratasubmissionform〔提交勘誤〕鏈接，然后填寫具體的錯誤信息即可。只要你提交的勘誤通過驗證，勘誤信息就會上傳到我們的網站，或者追加到已有勘誤列表中，顯示在該書的勘誤頁面。盜版對所有媒體來說，互聯網盜版都是一個棘手的問題。Packt很重視版權保護。如果你在互聯網上發現我們公司出版物的任何非法復制品，請及時告知我們相關網址或網站名稱，以便我們采取補救措施。如果發現可疑盜版材料，請通過copyright@packtpub聯系我們。對您幫助我們保護作者權益、確保我們持續提供高品質圖書的行為表示敬意。問題如果你對本書有任何問題，請聯系questions@packtpub，我們會盡力解決。第1章HTML5、CSS3和響應式網頁設計入門直到最近，網站設計普遍還在使用固定寬度〔如960像素〕，以期給所有終端用戶帶來較為一致的瀏覽體驗。這種固定寬度設計在筆記本電腦上顯示剛剛好，而在高分辨率顯示器上卻會在兩邊多出些空白。但現在有了智能。蘋果公司的iPhone第一次帶給我們真正意義上易用的上網體驗，之后其他公司紛紛效仿。現在人們可以舒服地使用上網沖浪，不用再像過去那樣需要有“挑圓片〞[1]世界冠軍一樣的靈活拇指，才能在小屏幕上看看網頁。此外，消費者在家中上網時優先使用小屏幕設備〔如平板電腦、上網本〕正成為趨勢。一個不爭的事實是，使用小屏幕設備上網的人數正在以前所未有的速度增長。與此同時，27英寸和30英寸的大顯示器也在快速普及。上網設備之間的尺寸差距與日俱增。[1]一種游戲，:///wiki/Tiddlywinks。——譯者注幸運的是，面對不斷開展的瀏覽器和上網設備，我們有可行的解決方案。采用HTML5和CSS3技術的響應式網頁設計，可以使網站兼容多種設備和屏幕。而這種方法的最正確之處，在于不需要什么效勞器端方案，也完全可以實現。本章內容：支持小屏幕設備的重要性什么是移動網站設計什么是響應式網頁設計優秀響應式網頁實例賞析視口和屏幕的區別安裝和使用修改視口的瀏覽器擴展程序使用HTML5編寫更簡潔的標記使用CSS3解決常見的設計問題1.1為什么智能很重要〔而老版的IE不再重要〕雖然統計數據一般僅用作粗略參考，但來自gs.statcounter的統計數據卻值得注意。從2023年7月到2023年7月的12個月中，全球瀏覽器的使用量從2.86%上漲至7.02%。InternetExplorer6的使用率那么是從8.79%下降到3.42%。到2023年7月，InternetExplorer7的使用率也降到了5.45%。如果客戶老是要求：“我們的網站必須兼容IE6和IE7！〞你可以反駁說：“我們應該把精力花在更有價值的地方。〞用上網的人比用臺式機和筆記本中的IE6或IE7上網的人多多了。你可以聽到全球前端開發工程師震耳欲聾的歡呼聲！越來越多的人使用小屏幕設備上網，這些設備上的瀏覽器在設計時都考慮到了如何顯示好現有網站。瀏覽器會將一個標準網頁縮小至與設備可視區域〔標準技術術語叫做“視口〞〕恰好匹配。然后用戶在自己感興趣的內容區域上放大瀏覽。這樣看起來已經挺好了，那作為前端設計師和工程師的我們，為什么還要在這上面繼續優化呢？在iPhone或Android上瀏覽的網頁越多〔如上圖所示的那樣〕，就越能深刻體會到為什么我們還需要繼續優化。為了看清楚頁面內容，需要不停地放大、縮小頁面，然后為了看到視口外的文字，再左、右拖動，結果一不小心點了一個鏈接，你說討厭不討厭？我們當然可以做得更好！1.2響應式設計一定是最正確選擇嗎如果預算充足且形勢需要，做一個真正的“版〞網站是首選。這樣就可以基于用戶的設備、位置、連接速度，以及包括技術特性在內的其他變量來提供不同的內容、設計和交互。舉一個實際的例子，假設有一家比薩連鎖店，它有一個標準版的網站和一個版網站，版網站可以基于增強現實功能、用戶當前GPS位置找到附近的比薩店。單獨一個響應式設計遠遠不能支撐這種解決方案。然而，不是所有工程都要求如此完美。大多數情況下，根據視口大小為用戶提供與之匹配的視覺效果還是優先選擇。例如，針對大多數網站，雖然從效勞器端請求的內容相同，但我們可以根據不同設備改變網頁的顯示方式。在小屏幕設備上，可能是將次要內容放在主體內容之下，或者最壞情況下將其直接隱藏；也可能是將導航按鈕改造成便于手指操作，而不是只提供一些需要精確瞄準才能點擊的玩意兒！字體大小也應該恰到好處，便于閱讀，不再需要不停地在屏幕上拖來拖去。同樣，在迎合小屏幕的同時，我們也不想降低筆記本和臺式機用戶的瀏覽體驗。既然我們意在兼容萬物，那給那些配備1900像素甚至更大屏幕的用戶提供一點額外改良又有何不可呢？簡而言之，我們需要那些能響應各種設備大小的完美設計。1.3響應式網頁設計的定義響應式網頁設計〔RWD，ResponsiveWebDesign〕這個術語，由伊桑-馬科特〔EthanMarcotte〕提出。他在AListApart發表了一篇開創性的文章，將三種已有的開發技巧〔彈性網格布局、彈性圖片、媒體和媒體查詢〕整合起來，并命名為響應式網頁設計。這個術語還有一堆表示相同意思的其他叫法，如流式設計、彈性布局、塑料布局、流體設計、自適應布局、跨設備設計以及彈性設計。上面僅列舉了其中一局部！不過，正如馬科特等人所說，真正的響應式設計方法不僅僅只是根據視口大小改變網頁布局。相反，它是要從整體上顛覆我們當前設計網頁的方法。以往我們先是針對桌面電腦進行固定寬度設計，然后將其縮小并針對小屏幕進行內容重排；現在我們應該首先針對小屏幕進行設計，然后逐步增強針對大屏幕的設計和內容。一句話概括響應式網頁設計如果要用一句話概括響應式網頁設計，我覺得它是針對任意設備對網頁內容進行完美布局的一種顯示機制。相反，如果需要根據不同設備提供特定的內容和功能，那就需要一個真正的“版〞網站。這種情況下，版網站會提供與桌面版網站完全不同的用戶體驗。1.4為什么要在響應式設計上停滯不前響應式網頁設計能夠根據視口變化控制頁面文檔流，但我們可以走得更遠。HTML5提供了比HMTL4更多且更加語義化的標簽。CSS3的媒體查詢是響應式設計不可或缺的組成局部，CSS3的其他功能給了我們前所未有的靈活性。我們將掙脫背景圖像和復雜的JavaScript代碼的羈絆，擁抱簡潔的CSS3漸變、投影、字體、動畫和變換。在使用HTML5和CSS3制作響應式網頁之前，讓我們先來欣賞一些值得學習的實例，看看哪些高手正在使用新潮的響應式HTML5和CSS3絕技創造奇跡，而我們可以從他們的開創性杰作中學到些什么。1.5響應式網頁設計例如假設要全方位測試你自己或別人的響應式網站，那么需要針對每一種設備和不同的屏幕尺寸，分別準備不同的測試系統。盡管這是最完美的方法，但通過改變瀏覽器窗口大小其實就可以完成大多數測試。除此之外，還有很多第三方插件和瀏覽器擴展可供選擇，通過它們可以將當前瀏覽器窗口或視口設定為指定像素。必要時，還可以自動將當前瀏覽器窗口或視口切換成為默認大小〔如1024×768像素〕。這樣你就可以輕松地測試不同屏幕視口尺寸下的網站效果。迷戀像素？忘了它吧！進入了響應式網頁設計的教堂，就不要再迷戀像素〔px〕這個度量單位，因為大多數情況下我們不會用像素，而會使用相對度量單位〔em或百分比〕。相對單位更方便我們審查其他響應式設計作品，查看設計的變更之處。1.5.1下載視口調試工具InternetExplorer用戶請下載安裝MicrosoftInternetExplorerDeveloperToolbar，下載地址如下：

如果你在使用Safari，雖然ResizeMe〔://web.me/aaronholla/Safari_Extensions/ResizeMe.html〕的功能類似且免費，但我最愛Resize〔://resizeSafari〕。Firefox用戶請下載Firesizer〔s:///en-US/firefox/addon/firesizer/〕，Chrome請下載WindowsResizer〔s://chrome.google/webstore/detail/kkelicaakdanhinjdeammmilcgefonfh〕。不喜歡使用瀏覽器擴展？還有一個方法：我寫了個簡單HTML頁面來顯示瀏覽器窗口的當前視口高度和寬度。頁面用了jQuery框架，獲取當前的視口的高度和寬度并顯示出來。你可以在瀏覽器新標簽頁中翻開這個頁面，調整窗口大小，然后切回你要測試的頁面查看效果。這個超級簡單的“Whatsizeismyviewportpage?〞頁面地址如下：

://benfrain/easily-display-the-viewport-size-of-yourfor-responsive-designs/視口和屏幕尺寸視口和屏幕尺寸不是同一個概念。視口是指瀏覽器窗口內的內容區域，不包含工具欄、標簽欄等。也就是網頁實際顯示的區域。屏幕尺寸指的是設備的物理顯示區域。需要注意的是有些瀏覽器調整工具顯示的尺寸包含瀏覽器的其他元素，諸如地址欄、標簽欄和搜索欄，而有些工具那么不是這樣。在下面的截圖中，實際的視口尺寸顯示在右上角〔1156×921像素〕，同時Firesizer插件將窗口尺寸顯示在右下角〔1171×1023像素〕。現在，我們帶著所有需要的工具，開始鑒賞最好的響應式網站。啟動你鐘愛的瀏覽器，翻開瀏覽器調整工具，訪問://thinkvitamin/。如果你的視口寬度大于1060像素，你會看到如下列圖所示的布局：如果你的視口寬度介于930像素到1060像素之間，你會看到如下列圖所示布局：注意