響應(yīng)式web設(shè)計(jì)html5和css3實(shí)戰(zhàn)-簡單版

章1.1為什么智能很重要（而老版的IE不再重要1.2響應(yīng)式設(shè)計(jì)一定是最佳選擇.1視口調(diào)試工1.5.2創(chuàng)意源為什么HTML51.6.1省時(shí)省1.6.2新增了語義化元1.7.1：CSS3不破壞任何東1.10響應(yīng)式網(wǎng)頁設(shè)計(jì)不是靈丹妙1.12小第2章查詢：支持不同的視2.1現(xiàn)在就能使用查2.2為什么響應(yīng)式設(shè)計(jì)需要查2.2.1查詢語2.2.2查詢能檢測那些特2.2.3用查詢改造我們的設(shè)2.2.4加載查詢的最佳方2.3我們的第一個(gè)響應(yīng)式設(shè).2響應(yīng)式設(shè)計(jì)中要保證盡可能精移動(dòng)瀏覽器自動(dòng)調(diào)整頁面大2.5針對(duì)不同視口寬度修正設(shè)2.6響應(yīng)式設(shè)計(jì)中內(nèi)容始終優(yōu)2.7查詢只是必要條件之2.8小第33.1固定布局經(jīng)不起未來考.1需要牢記的公.33.4em讓隨視口縮3.5.2為特定指定特定規(guī)3.5.3給彈性設(shè)置閾3.6··把背景放在其他地3.7流動(dòng)網(wǎng)格布局和查詢的默契配3.8CSS網(wǎng)格系3.9小4.1.1大多數(shù)可以用HTML5編4.1.2膩?zhàn)雍?.2如何編寫HTML5網(wǎng)4.2.2HTML5的合理寫4.2.3偉大的4.2.4HTML8 ..4在頁面中應(yīng)用文本層語義元4.6遵循WAI-ARIA實(shí)現(xiàn)無站ARIA4.7在HTML54.8用HTML5的方法為頁面添加或音4.8.1提供備用的源文4.8.2針對(duì)老版本瀏覽器的備用方4.94.10Web4.10.1Web4.10.2讓網(wǎng)頁可離線使4.10.3manifest文4.10.7Web應(yīng)用的故4.11小第5章CSS3：選擇器、字體和顏色5.1.1InternetExplorer6到8對(duì)CSS3的支5.1.2使用CSS3設(shè)計(jì)和開發(fā)頁5.2CSS規(guī)則解5.3私有前綴及其用5.4.2文字換5.5.1CSS3··1CSS3的子字符串匹配屬性選擇··2.一個(gè)活生生的例··1last-child··2nth-child··3.理解nth規(guī)則的作··4.否定（:not）選擇5.5.3對(duì)偽元素的修使用@font-face嵌入網(wǎng)頁字5.7幫幫我，標(biāo)題模糊怎么5.8新的CSS3顏色格式5.8.1RGB顏5.8.2HSL顏5.8.4透明通5.9小第6章用CSS3創(chuàng)造令人驚艷的px、em或rem6.1.3取消文字陰··6.1.4制作浮雕文字陰影效6.1.5多重文字陰6.2盒陰.2多重陰線性背景漸6.3.2徑向背景漸6.3.3重復(fù)漸6.46.6組合使用CSS背景大6.7.2背景位CSS特6.9可縮放圖標(biāo)：響應(yīng)式設(shè)計(jì)中的完美選6.10小7.1什么是CSS37.1.1過渡相關(guān)的屬··1.··2.··3.理解過渡調(diào)速函7.1.2響應(yīng)式中的有趣過7.2CSS3的2D變··1.··2.··3.··4.··5.7.3嘗試CSS3的3D7.3.1分析3D7.3.23D組合使用CSS37.5小第8章用HTML5CSS3征服表8.1.1理解HTML5表單中的元.38.1.4 8.1.6list（及對(duì)應(yīng)的datalist元素1.··2.··3.··4.··..4..使用CSS3美化HTML5表8.4小第99.1漸進(jìn)增強(qiáng)與優(yōu)雅降現(xiàn)9.2.1統(tǒng)計(jì)數(shù)據(jù)（再看看世界的變化9.2.2個(gè)人選9.3前端的9.3.1Modernizr輔助修正樣式問9.3.2ModernizrIE支持HTML5元9.3.3給IE6、7、8追加min/max查詢功9.3.4Modernizr9.4必要時(shí)將導(dǎo)航轉(zhuǎn)換為下拉菜9.5高分辨率設(shè)備（未來趨勢9.6小附錄1：響應(yīng)式Web設(shè)計(jì)（HTML5CSS3）附錄2：響應(yīng)式Web設(shè)計(jì)（HTML5CSS3） 是一名具有十多年經(jīng)驗(yàn)的網(wǎng)頁設(shè)計(jì)師和前端工程師，直接與世界各地的客戶和計(jì)機(jī)構(gòu)并肩工作。同時(shí)他還是一名技術(shù)，定期為一些關(guān)注Mac平臺(tái)、前沿科技、網(wǎng)頁他的個(gè)人 ，地址 首先要感謝網(wǎng)絡(luò)社區(qū)。沒有大家集思廣益的才智、大方的文檔和開放共享的解決方案，我不可能在互聯(lián)網(wǎng)行業(yè)做出現(xiàn)在這點(diǎn)還稍稍令我自豪的事情。其次，我要感謝響應(yīng)式網(wǎng)頁設(shè)計(jì)之父EthanMarcotte。他和我從未謀面或交談過，但他的最后，感謝家人?？催^（同樣被低估的《義海傾情》1的人都知道：“血濃于水。其他人都是陌生人。”1《義海傾情》Wyatt ?！g者蒂姆·伯納斯-李在1991年制作并發(fā)布了第一個(gè)，如今剛剛過去21個(gè)年頭。在這21年里簡單的文字排版，到表格布局，再到DIV+CS，直到現(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)頁設(shè)計(jì)帶來了新的，在面對(duì)形，伊?！ゑR科特在AListApart上的一篇文章，為我們打開了思路。在這篇名為《 Design》的文章中，伊?！ゑR科特將三種已有的技術(shù)整合在一起（當(dāng)然也有爭議，很多設(shè)計(jì)師和開發(fā)者紛紛實(shí)踐并完善這種理念。兩年多的時(shí)間里，涌現(xiàn)出了越來越多的響應(yīng)式，針對(duì)響應(yīng)式設(shè)計(jì)的工具和資源也日漸豐富。截至想、方法、工具、技巧、HTML5、CSS3、相關(guān)資源，以及針對(duì)老版本瀏覽器的兼容方案內(nèi)容，并以實(shí)際案例循序漸進(jìn)地講解了如何創(chuàng)建一個(gè)優(yōu)雅高效易于的響應(yīng)式。希望這“得功有法，秉一應(yīng)萬”，這是太極拳的目標(biāo)，也可以作為響應(yīng)式設(shè)計(jì)的目標(biāo)。好響應(yīng)式設(shè)計(jì)這門功夫，能夠讓你安然自在，以一應(yīng)萬。元芳，潛心吧！感謝裕波、楊海玲老師及朱巍老師，讓我有機(jī)會(huì)翻譯本書。非常感謝圖靈各位編輯的辛勤工作，尤其感謝李松峰老師的細(xì)心指導(dǎo)。另外要感謝圖靈社區(qū)，我在這里受益匪淺。最后，感謝老婆，本書的翻譯離不開支持、監(jiān)督與參謀。我在翻譯本書時(shí)盡力保證信與達(dá)，雅則不敢奢望。翻譯中的錯(cuò)誤在所難免，歡迎廣大讀者正。如果對(duì)本書有任何意見、建議或想法，請(qǐng)發(fā)送郵件至w 如果你想給自己的做一個(gè)單獨(dú)的“版”，請(qǐng)三思而后行！響應(yīng)式網(wǎng)頁設(shè)計(jì)提供了一種設(shè)本書提供了一整套方法，用來將一個(gè)現(xiàn)有的固定寬度的設(shè)計(jì)變成響應(yīng)式的。此外，本書應(yīng)用HTML5和CSS3提供的最有用的技術(shù)，擴(kuò)展了響應(yīng)式網(wǎng)頁設(shè)計(jì)的方法論，以便更簡潔、更易于。本書還講解了編寫和發(fā)布代碼、、文件的最佳實(shí)踐。只要你懂HTML和CSS，你就能制作響應(yīng)式第1章，HTML5、CSS3和響應(yīng)式網(wǎng)頁設(shè)計(jì)入門，定義了什么是響應(yīng)式網(wǎng)頁設(shè)計(jì)，展示了一些響應(yīng)式設(shè)計(jì)的示例，重點(diǎn)強(qiáng)調(diào)了使用HTML5和CSS3的優(yōu)勢。第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)頁。第4章，響應(yīng)式設(shè)計(jì)中的HTML5，探討了使用HTML5技術(shù)的諸多好處，比如更簡潔的代碼、語義化、離線 第5章，CS3：選擇器、字體和顏色模式，展示了CSS3選擇器的強(qiáng)大，可以讓你輕松地指定和改變?nèi)魏卧亍＿€講解了通過@fnt-ace來使用漂亮的網(wǎng)絡(luò)字體，另外講解了新的CSS3顏色模式如RG()和HL()。第6章，用CSS3創(chuàng)造驚艷的美，展示了如何使用純粹的CSS3代碼實(shí)現(xiàn)文字陰影、盒陰影和漸變效果。還涵蓋了如何使用多重背景，以及如何通過字體文件創(chuàng)建圖標(biāo)。第7章，CSS3的過渡、變形和動(dòng)畫，講解如何僅使用CSS3來創(chuàng)建和轉(zhuǎn)換屏幕上的元素，并第8章，用HTML5和CSS3征服表單，闡述了在所有設(shè)備上（從的智能到桌面版瀏第9章，解決跨瀏覽器問題，講解了如何保證老版本的InternetExplorer可響應(yīng)，如何將一組修改成移動(dòng)設(shè)備上的一個(gè)菜單，如何為高分辨率顯示器提供不同內(nèi)容，以及如何使用Modernizr框架分條件地加載資源文件。你必須對(duì)HTML和CSS很熟悉。有一點(diǎn)JavaScript基礎(chǔ)會(huì)很有幫助。良好的品味也很你是否正在開發(fā)兩套，一套給移動(dòng)設(shè)備，一套給大顯示器？又或者你已聽“響應(yīng)式網(wǎng)頁設(shè)計(jì)”但卻不確定如何將HTML5、CSS3和響應(yīng)式設(shè)計(jì)融合在一起？如果是，那么本書可以讓你在所有競爭對(duì)手之前，將你的提升到一個(gè)更次。本向那些正在使用HTML4.01和CSS2.1開發(fā)固定寬度的網(wǎng)頁設(shè)計(jì)師和開發(fā)，講解了如何使用HTML5和CSS3制作可適應(yīng)任意屏幕尺寸設(shè)備的響應(yīng)式。<sCRiptSrC=js/jquery-<sCRiptSrC=js/jquery-“HTML5

這樣的語句也是有的。代碼段使用如下格式<div <div <ulclass="nav- <li><a <li><ahref="#" <!—endofnavigation--</div></div><!—endofheader--當(dāng)要專門強(qiáng)調(diào)代碼塊中的某一部分時(shí)，則對(duì)相關(guān)行或條目使用粗體格式：[編者注：網(wǎng)頁格式無法實(shí)現(xiàn)此效果。]#wrapper margin-left: width:96%;/*最的DIV}#header#header{margin-right:10px;margin-left:10px;width:97.9166667%;/*940÷960新術(shù)語，以及重要詞匯也使用粗體。文中提到的那些菜單、框中的文字，會(huì)使用粗體或大寫來標(biāo)注，如：“導(dǎo)航按鈕不再做背景色切換，內(nèi)容區(qū)的THESESHOULDHAVEWON按鈕和側(cè)邊欄的詳細(xì)信息按鈕了，而字體也與設(shè)計(jì)文檔相差甚遠(yuǎn)?！保∵@個(gè)圖標(biāo)表示警告或重￥這個(gè)圖標(biāo)表一般的閱讀反饋，可直接發(fā)送電子郵件至fee 如果你在某個(gè)領(lǐng)域內(nèi)有專長且有編寫相關(guān)書籍，請(qǐng) thors現(xiàn)在你已是 的尊貴讀者了，我們有一系列的售后支持，保證你的消費(fèi)物有所值錯(cuò)誤，避免其他讀者產(chǎn)生不必要的誤解。一旦發(fā)現(xiàn)錯(cuò)誤， /support，選擇書名，點(diǎn)擊erratasubmissionform（提交勘誤的，或者追加到已有勘誤列表中，顯示在該書的勘誤頁面。盜對(duì)所有來說，互聯(lián)網(wǎng)盜版都是一個(gè)棘手的問題。 很重視保護(hù)。如果你在互網(wǎng)上發(fā)現(xiàn)我們公司物的任何品，請(qǐng)及時(shí)告知我們相關(guān)或名稱，以便我們?nèi)绻l(fā)現(xiàn)可疑盜版材料，請(qǐng)通過copy 者權(quán)益、確保我們持續(xù)提供高品質(zhì)的行為表示敬意。問如果你對(duì)本書有任何問題，請(qǐng)聯(lián) ，我們會(huì)盡力解決第1 HTML5、CSS3和響應(yīng)式網(wǎng)頁設(shè)計(jì)入直到最近，設(shè)計(jì)普遍還在使用固定寬度（如960像素），以期給所有終端用戶帶來較的第一次帶給我們真正意義上易用的上網(wǎng)體驗(yàn)，后他公紛效仿現(xiàn)人們以服地用網(wǎng)浪，用像過那需要有“挑圓片”]世界冠軍一樣的靈活拇指，才能在幕上看看網(wǎng)頁。此外，消費(fèi)者在家中上網(wǎng)時(shí)優(yōu)先使用幕設(shè)備（如平板電腦、上網(wǎng)本正成為趨勢。一個(gè)不爭的事實(shí)是，使用幕設(shè)備上網(wǎng)的人數(shù)正在以前所未有的速度增長。與此同時(shí)，27英寸和30英寸的大顯示器也在快速普及。上網(wǎng)設(shè)備之間的尺寸差距與日俱增。一種游戲，?！g者幸運(yùn)的是，面對(duì)不斷發(fā)展的瀏覽器和上網(wǎng)設(shè)備，我們有可行的解決方案。采 HTML5CSS3技術(shù)的響應(yīng)式網(wǎng)頁設(shè)計(jì)，可以使兼容多種設(shè)備和屏幕。而這種方法的最佳之處，在于不需要什么服務(wù)器端方案，也完全可以實(shí)現(xiàn)。本章內(nèi)支持幕設(shè)備的重要什么是移動(dòng)設(shè)什么是響應(yīng)式網(wǎng)頁設(shè)使用HTML5使用CSS3為什么智能很重要（而老版的IE不再重要雖然統(tǒng)計(jì)數(shù)據(jù)一般僅用作粗略參考，但來自 的統(tǒng)計(jì)數(shù)據(jù)卻值得注意。從2010年7月到2011年7月的12個(gè)月中，全球?yàn)g覽器的使用量從2.86%上漲至7.02%。InternetExplorer6的使用率則是從8.79%下降到3.42%。到2011年7月，InternetExplorer7的使用率也降到了545%。如果客戶老是要求：“我們的必須兼容I6和I7！”你可以反駁說：“我們應(yīng)該把精力花在更有價(jià)值的地方?！庇蒙暇W(wǎng)的人比用臺(tái)式機(jī)和筆記本中的6或7越越多的人用幕設(shè)上網(wǎng)，這設(shè)備上的覽器設(shè)計(jì)時(shí)都慮到了如何示好現(xiàn)有。瀏覽器會(huì)將一個(gè)標(biāo)準(zhǔn)網(wǎng)頁縮小至與設(shè)備可視區(qū)域（標(biāo)準(zhǔn)技術(shù)術(shù)語叫做“視口”）配然后戶自己的內(nèi)區(qū)上放瀏。樣起來經(jīng)好了那為前端設(shè)計(jì)師和工程師的我們，為什么還要在這上面繼續(xù)優(yōu)化呢？在或Android上瀏覽的網(wǎng)頁越多（如上圖所示的那樣，就越能深刻體會(huì)到視口外的文字，再左、右拖動(dòng)，結(jié)果一不點(diǎn)了一個(gè)，你說討厭不討厭？我們當(dāng)然可以做得更好！可以基于增強(qiáng)現(xiàn)實(shí)功能、用戶當(dāng)前GPS位置找到附近的比薩店。單獨(dú)一個(gè)響應(yīng)式設(shè)計(jì)優(yōu)例對(duì)從求同們根變示上可容內(nèi)下或情況下將其直接隱藏；也可能是將導(dǎo)航按鈕改造成便于手指操作，而不是只提供一些需要精確瞄準(zhǔn)才能點(diǎn)擊的玩意兒！字體大小也應(yīng)該恰到好處，便于閱讀，不再需要不停地在屏幕上合用戶的瀏覽體驗(yàn)。既然我們意在兼容萬物，那給那些配備100像素甚至更大屏幕的用戶提供一點(diǎn)額外改進(jìn)又有何不可呢？簡而言之，我們需要那些能響應(yīng)各種設(shè)備大小的完美設(shè)計(jì)。響應(yīng)式網(wǎng)頁設(shè)計(jì)（RWD，ResponsiveWebDesign）這個(gè)術(shù)語，由伊桑-馬科特Marcotte）提出。他在AListApart了一篇開創(chuàng)性的文章，將三種已有的開發(fā)技巧（性網(wǎng)格布局、彈性、和查詢整合起來，并命名為響應(yīng)式網(wǎng)頁設(shè)計(jì)。這個(gè)術(shù)語局、跨設(shè)備設(shè)計(jì)以及彈性設(shè)計(jì)。改局，整計(jì)法我是針對(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)頁設(shè)計(jì)“版”。這種情況下，版會(huì)提供與桌面版完全不同的用戶體驗(yàn)HMTL4且更加語義化的。CSS3的查詢是響應(yīng)式設(shè)計(jì)不可或缺的組成部分，CSS3的其他功能給了我們前所未有的靈活性。掙脫背景圖像和復(fù)雜的JavaScript代碼CSS3漸變、投影、字體、動(dòng)畫和變換。在使 HTML5和CSS3制作響應(yīng)式網(wǎng)頁之前，讓我們先來欣賞一些值得學(xué)習(xí)的實(shí)例，看哪些高手正在使用新潮的響應(yīng)式HTML5和CSS3絕技創(chuàng)造，而我們可以從他們的開創(chuàng)若要全方位測試你自己或別人的響應(yīng)式，則需要針對(duì)每一種設(shè)備和不同的屏幕尺寸，分別準(zhǔn)備不同的測試系統(tǒng)。盡管這是最完美的辦法，但通過改變?yōu)g覽器窗口大小其實(shí)就可以完成大除，第件器擴(kuò)，們前器戀像素？忘了它吧！進(jìn)入了響應(yīng)式網(wǎng)頁設(shè)計(jì)的教堂，就不要再迷戀像素（px）這個(gè)度量單位，因?yàn)榇笙挛覀儾粫?huì)用像素，而會(huì)使用相對(duì)度量單位（em或百分比。相對(duì)單位更方便我們其1.5.1視口調(diào)試工InternetExplorer用戶請(qǐng)安裝 InternetExplorerDeveloperToolbar，地 如果你在使用Safari，雖然ResizeMe（ ResizeMe.html）的功能類似且免費(fèi)，但我最愛Resize（http: Firefox用戶請(qǐng)F(tuán)iresizer（Chrome請(qǐng)WindowsResizer（https:/ kklcakaidmmcgfnh不喜歡使用瀏覽器擴(kuò)展？還有一個(gè)方法：我寫了個(gè)簡 頁面來顯示瀏覽器窗口的前視口高度和寬度。頁面用了jQuery框架，獲取當(dāng)前的視口的高度和寬度并顯示出來。你可超級(jí)簡單的“Whatsizeismyviewportpage?”頁面地址如下： 視口和屏幕尺寸視口和屏幕尺寸不是同一個(gè)概念。視口是指瀏覽器窗口內(nèi)的內(nèi)容區(qū)域，不包含、屏幕尺寸指的是設(shè)備的物理顯示區(qū)域。需要注意的是有些瀏覽器調(diào)整工具顯示的尺寸包含瀏覽器的其他元素，諸如地址欄、欄和搜索欄，而有些工具則不是這樣。在下面的截圖中，實(shí)際的視口尺寸顯示在右上角（1156×921像素），同 插件將窗口尺寸顯示在右下角（1171×1023像素）覽器調(diào)整工具，http: /。如果你的視口寬度大于1060像素，你會(huì)看到如下圖所示的布如果你的視口寬度介于930像素到1060像間，你會(huì)看到如下圖所示布局注意看ogo旁邊的主導(dǎo)航菜單是如何變化的。主內(nèi)容區(qū)右側(cè)的圖標(biāo)一個(gè)挨著一個(gè)排列，界80像素的效果，截圖如下：頭部的效果基本沒變，但注