響應(yīng)式Web設(shè)計(jì)：HTML5和CSS3實(shí)戰(zhàn)

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

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

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