響應式Web設計

前言

　　如果你想給自己的網(wǎng)站做一個單獨的“手機版”，請三思而后行！響應式網(wǎng)頁設計提供了一種設計方法，可以使同一網(wǎng)站在智能手機、桌面電腦，以及介于這兩者之間的任意設備上完美顯示。這種方法能夠根據(jù)用戶的屏幕尺寸，合理地為現(xiàn)有及將來的各種設備提供最佳的瀏覽體驗。　　本書提供了一整套方法，用來將一個現(xiàn)有的固定寬度的網(wǎng)站設計變成響應式的。此外，本書應用HTML5和CSS3提供的最新最有用的技術(shù)，擴展了響應式網(wǎng)頁設計的方法論，以便網(wǎng)站更簡潔、更易于維護。本書還講解了編寫和發(fā)布代碼、圖片、文件的最佳實踐?！　≈灰愣瓾TML和CSS，你就能制作響應式網(wǎng)站?！　”緯鴥?nèi)容　　第1章，HTML5、CSS3及響應式設計入門，定義了什么是響應式網(wǎng)頁設計，展示了一些響應式設計的網(wǎng)站示例，重點強調(diào)了使用HTML5和CSS3的優(yōu)勢?！　〉?章，媒體查詢：支持不同的視口，講解了什么是媒體查詢，如何實現(xiàn)媒體查詢，以及如何針對設備能力匹配CSS樣式，將其應用于任意設計?！　〉?章，擁抱流式布局，講解了流式布局的優(yōu)點，以及如何將一個現(xiàn)有的固定寬度設計輕松地轉(zhuǎn)換為流式布局，怎樣使用CSS框架快速搭建響應式網(wǎng)頁?！　〉?章，響應式設計中的HTML5，探討了使用HTML5技術(shù)的諸多好處，比如更簡潔的代碼、語義化標簽、離線存儲，以及無障礙網(wǎng)頁應用輔助技術(shù)?！　〉?章，CSS3：選擇器、字體和顏色模式，展示了CSS3選擇器的強大威力，可以讓你輕松地指定和改變?nèi)魏卧亍＿€講解了通過@font-face聲明來使用漂亮的網(wǎng)絡字體，另外講解了新的CSS3顏色模式如RGB(A)和HSL(A)?！　〉?章，用CSS3創(chuàng)造令人驚艷的美，展示了如何使用純粹的CSS3代碼實現(xiàn)文字陰影、盒陰影和漸變效果。還涵蓋了如何使用多重背景圖片，以及如何通過字體文件創(chuàng)建圖標。　　第7章，CSS3的過渡、變形和動畫，講解如何僅使用CSS3來創(chuàng)建和轉(zhuǎn)換屏幕上的元素，并制作動畫效果。　　第8章，用HTML5和CSS3征服表單，闡述了在所有設備上（從最新的智能手機到桌面版瀏覽器）都能良好運行的跨瀏覽器表單開發(fā)技巧?！　〉?章，解決跨瀏覽器問題，講解了如何保證老版本的Internet Explorer可響應，如何將一組鏈接修改成移動設備上的一個菜單，如何為高分辨率顯示器提供不同內(nèi)容，以及如何使用Modernizr框架分條件地加載資源文件?！　蕚涔ぷ鳌　∧惚仨殞TML和CSS很熟悉。有一點JavaScript基礎(chǔ)會很有幫助。良好的電影品味也很有益處?！　”緯x者　　你是否正在開發(fā)兩套網(wǎng)站，一套給移動設備，一套給大顯示器？又或者你已聽說過“響應式網(wǎng)頁設計”但卻不確定如何將HTML5、CSS3和響應式設計融合在一起？如果是，那么本書可以讓你在所有競爭對手之前，將你的網(wǎng)站提升到一個更高層次?！　”緯嫦蚰切┱谑褂肏TML 4.01和CSS 2.1開發(fā)固定寬度網(wǎng)站的網(wǎng)頁設計師和開發(fā)人員，講解了如何使用HTML5和CSS3制作可適應任意屏幕尺寸設備的響應式網(wǎng)站。　　本書約定　　本書中使用幾種不同的文字樣式來區(qū)分不同類型的信息，具體約定如下。　　正文中的代碼使用如下格式：　　“HTML5接受寬松語法，例如 這樣的語句也是有效的。”　　代碼段使用如下格式：　　……　　新術(shù)語，以及重要詞匯也使用粗體。文中提到的那些菜單、對話框中的文字，會使用粗體或大寫來標注，如：“導航按鈕不再做背景色切換，內(nèi)容區(qū)的THESE SHOULD HAVE WON按鈕和側(cè)邊欄的詳細信息按鈕消失了，而字體也與設計文檔相差甚遠?！薄　∵@個圖標表示警告或重要提醒?！　∵@個圖標表示提示或技巧?！　∽x者反饋　　我們時刻歡迎你的反饋，以便了解你對本書的看法。你的寶貴意見有助于我們提升書籍的質(zhì)量。　　一般的閱讀反饋，可直接發(fā)送電子郵件，請在郵件標題中注明書名?！　∪绻阍谀硞€領(lǐng)域內(nèi)有專長且有興趣編寫相關(guān)書籍，請訪問網(wǎng)站查看作者指南。　　客戶支持　　現(xiàn)在你已是Packt圖書的尊貴讀者了，我們有一系列的售后支持，保證你的消費物有所值?！　″e誤　　盡管我們已經(jīng)對書籍作了仔細校對以保證內(nèi)容準確，但錯誤在所難免。如果在書中發(fā)現(xiàn)任何的文字或代碼錯誤，非常歡迎你將這些錯誤提交給我們，這樣可以幫助我們在后續(xù)版本中改正錯誤，避免其他讀者產(chǎn)生不必要的誤解。一旦發(fā)現(xiàn)錯誤，請登錄網(wǎng)站，選擇書名，點擊errata submission form（提交勘誤）鏈接，然后填寫具體的錯誤信息即可。只要你提交的勘誤通過驗證，勘誤信息就會上傳到我們的網(wǎng)站，或者追加到已有勘誤列表中，顯示在該書的勘誤頁面 ?！　”I版　　對所有媒體來說，互聯(lián)網(wǎng)盜版都是一個棘手的問題。Packt很重視版權(quán)保護。如果你在互聯(lián)網(wǎng)上發(fā)現(xiàn)我們公司出版物的任何非法復制品，請及時告知我們相關(guān)網(wǎng)址或網(wǎng)站名稱，以便我們采取補救措施?！　∪绻l(fā)現(xiàn)可疑盜版材料，請通過網(wǎng)站聯(lián)系我們。對您幫助我們保護作者權(quán)益、確保我們持續(xù)提供高品質(zhì)圖書的行為表示敬意。　　問題　　如果你對本書有任何問題，請聯(lián)系我們，我們會盡力解決。

內(nèi)容概要

　　移動互聯(lián)網(wǎng)時代到來了?！俄憫絎eb設計：HTML5和CSS3實戰(zhàn)》將當前Web設計中熱門的響應式設計技術(shù)與HTML5和CSS3結(jié)合起來，為讀者全面深入地講解了針對各種屏幕大小設計和開發(fā)現(xiàn)代網(wǎng)站的各種技術(shù)。不僅討論了媒體查詢、流式布局、相對字體、響應式媒體，更將HTML5和CSS3的相關(guān)知識點一并講解，是學習最新Web設計技術(shù)不可多得的佳作。
《響應式Web設計：HTML5和CSS3實戰(zhàn)》適合各個層次的Web開發(fā)和設計人員閱讀。

作者簡介

　　Ben
Frain是一名具有十多年經(jīng)驗的網(wǎng)頁設計師和前端工程師，直接與世界各地的客戶和設計機構(gòu)并肩工作。同時他還是一名技術(shù)記者，定期為一些關(guān)注Mac平臺、前沿科技、網(wǎng)頁設計和航空技術(shù)的刊物撰稿。在此之前，他曾是一名懷才不遇的（而且謙虛謹慎的）電視演員，畢業(yè)于索爾福德大學的媒體與表演專業(yè)。他寫了四部（自認為）同樣被低估的劇本，而且始終心懷能賣出一部的信念（盡管不像最初那么強烈了）。工作之余，在身體（和妻子）允許的情況下，他喜歡玩室內(nèi)足球。

書籍目錄

第1章 　HTML5、CSS3及響應式設計入門
1.1 　為什么智能手機很重要（而老版的IE不再重要）
1.2 　響應式設計一定是最佳選擇嗎
1.3 　響應式網(wǎng)頁設計的定義
1.4 　為什么要在響應式設計上停滯不前
1.5 　響應式網(wǎng)頁設計示例
1.5.1 　下載視口調(diào)試工具
1.5.2 　在線創(chuàng)意源泉
1.6 　為什么HTML5很優(yōu)秀
1.6.1 　省時省力
1.6.2 　新增了語義化標簽元素
1.7 　CSS3為響應式設計和更多創(chuàng)新奠定了基礎(chǔ)
1.7.1 　底線：CSS3不破壞任何東西
1.7.2 　CSS3如何解決日常設計問題
1.8 　看吶，不用圖片
1.9 　HTML5和CSS3現(xiàn)在就能用嗎
1.10 　響應式網(wǎng)頁設計不是靈丹妙藥
1.11 　引導客戶：網(wǎng)站不必在所有瀏覽器中表現(xiàn)一致
1.12 　小結(jié)
第2章 　媒體查詢：支持不同的視口
2.1 　現(xiàn)在就能使用媒體查詢
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 　小視口下的內(nèi)容剪切
2.4 　阻止移動瀏覽器自動調(diào)整頁面大小
2.5 　針對不同視口寬度修正設計
2.6 　響應式設計中內(nèi)容始終優(yōu)先
2.7 　媒體查詢只是必要條件之一
2.8 　小結(jié)
第3章 　擁抱流式布局
3.1 　固定布局經(jīng)不起未來考驗
3.2 　為什么響應式設計需要百分比布局
3.3 　將網(wǎng)頁從固定布局修改為百分比布局
3.3.1 　需要牢記的公式
3.3.2 　設置百分比元素的上下文
3.3.3 　必須時刻牢記上下文
3.4 　用em替換px
3.5 　彈性圖片
3.5.1 　讓圖片隨視口縮放
3.5.2 　為特定圖片指定特定規(guī)則
3.5.3 　給彈性圖片設置閾值
3.5.4 　超級全能的max-width屬性
3.6 　為不同的屏幕尺寸提供不同的圖片
3.7 　流動網(wǎng)格布局和媒體查詢的默契配合
3.8 　CSS網(wǎng)格系統(tǒng)
3.9 　小結(jié)
第4章 　響應式設計中的HTML5
4.1 　HTML5的哪些部分現(xiàn)在就能用
4.1.1 　大多數(shù)網(wǎng)站可以用HTML5編寫
4.1.2 　膩子腳本和Modernizr
4.2 　如何編寫HTML5網(wǎng)頁
4.2.1 　HTML5的精簡之道
4.2.2 　HTML5標簽的合理寫法
4.2.3 　偉大的標簽萬歲
4.2.4 　HTML的廢棄零件
4.3 　HTML5的全新語義化元素
……
第5章 　CSS3：選擇器、字體和顏色模式
5.1 　CSS3給前端開發(fā)人員帶來了什么
5.1.1 　Internet Explorer 6到8對CSS3的支持
5.1.2 　使用CSS3設計和開發(fā)頁面
5.2 　CSS規(guī)則解析
5.3 　私有前綴及其用法
5.4 　快速而有效的CSS技巧
5.4.1 　CSS3多欄布局
5.4.2 　文字換行
5.5 　CSS3的新增選擇器及其用法
5.5.1 　CSS3屬性選擇器
5.5.2 　CSS3結(jié)構(gòu)偽類
5.5.3 　對偽元素的修正
5.6 　自定義網(wǎng)頁字體
5.6.1 　@font-face規(guī)則
5.6.2 　使用@font-face嵌入網(wǎng)頁字體
5.7 　幫幫我，標題模糊怎么辦
5.8 　新的CSS3顏色格式和透明度
5.8.1 　RGB顏色
5.8.2 　HSL顏色
5.8.3 　針對IE6、IE7和IE8提供備用顏色值
5.8.4 　透明通道
5.9 　小結(jié)
第6章 　用CSS3創(chuàng)造令人驚艷的美
6.1 　文字陰影
6.1.1 　HEX、HSL或RGB顏色都可以
6.1.2 　px、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 　線性背景漸變
6.3.2 　徑向背景漸變
6.3.3 　重復漸變
6.4 　背景漸變圖案
6.5 　CSS3的響應性
6.6 　組合使用CSS3屬性
6.7 　多重背景圖片
6.7.1 　背景圖片大小
6.7.2 　背景圖片位置
6.7.3 　背景屬性的縮寫語法
6.8 　更多CSS特性
6.9 　可縮放圖標：響應式設計中的完美選擇
6.10 　小結(jié)
第7章 　CSS3過渡、變形和動畫
7.1 　什么是CSS3過渡以及如何使用它
7.1.1 　過渡相關(guān)的屬性
7.1.2 　響應式網(wǎng)站中的有趣過渡
7.2 　CSS3的2D變形
7.3 　嘗試CSS3的3D變形
7.3.1 　分析3D變形效果
7.3.2 　3D變形尚未成熟
7.4 　CSS3動畫效果
7.5 　小結(jié)
第8章 　用HTML5和CSS3征服表單
8.1 　HTML5表單
8.1.1 　理解HTML5表單中的元素
8.1.2 　placeholder
8.1.3 　required
8.1.4 　autofocus
8.1.5 　autocomplete
8.1.6 　list（及對應的datalist元素）
8.1.7 　HTML5的新輸入類型
8.1.8 　日期和時間輸入類型
8.2 　如何給不支持新特性的瀏覽器打補丁
8.3 　使用CSS3美化HTML5表單
8.4 　小結(jié)
第9章 　解決跨瀏覽器問題
9.1 　漸進增強與優(yōu)雅降級
9.2 　該不該修復老版本IE
9.2.1 　統(tǒng)計數(shù)據(jù)（再看看世界的變化）
9.2.2 　個人選擇
9.3 　前端的瑞士軍刀：Modernizr
9.3.1 　使用Modernizr輔助修正樣式問題
9.3.2 　使用Modernizr讓老版本IE支持HTML5元素
9.3.3 　給IE6、7、8追加min/max媒體查詢功能
9.3.4 　使用Modernizr按需加載資源
9.4 　必要時將導航鏈接轉(zhuǎn)換為下拉菜單
9.5 　高分辨率設備（未來趨勢）
9.6 　小結(jié)

章節(jié)摘錄

版權(quán)頁：   插圖：   在上述所有特性中，除scan和grid之外，都可使用min和max前綴來創(chuàng)建一個查詢范圍。例如，分析如下所示的代碼片段： @import url（”phone.css"） screen and （min-width:200px） and （max-width:360px）; 這里對width應用了min和max來設定查詢范圍。這樣phone.css文件只會引入視口寬度介于200像素至360像素的顯示屏設備。 2.2.3用媒體查詢改造我們的設計 毫無疑問，你肯定知道CSS代表層疊樣式表。所謂層疊，就是指樣式表中后面的樣式會覆蓋前面相同的樣式（除非前面的樣式具有更高的針對性）。因此我們可以在樣式表的開頭設置基本樣式，以便適應所有設計，然后使用媒體查詢來進一步重寫相應的部分。例如，先針對大視口設計（用戶大多數(shù)情況下使用鼠標），將導航鏈接設計成簡單的文字鏈接；然后再針對較小的視口，使用媒體查詢重寫這部分樣式，為拇指一族提供更大的點擊區(qū)域。 2.2.4加載媒體查詢的最佳方法 現(xiàn)代瀏覽器雖然可以智能地忽略與自身不匹配的樣式文件，但它卻不一定不下載這些文件。因此，將不同媒體查詢的樣式保存到獨立的文件中沒有太大好處（個人喜好或為便于組織代碼除外）。使用多個獨立的文件會增加用于頁面渲染的HTTP請求數(shù)量，從而導致頁面加載變慢。 Respond.js是為Intemet Explorer 8及更低版本增加媒體查詢支持的最快的JavaScript工具，但它目前無法解析CSS的@imp。rt命令。因此，建議在已有的樣式表中追加媒體查詢樣式。使用如下語法即可在已有樣式表中加入媒體查詢： @media screen .and （max-width: 768px） {／*樣式*／} 2.3我們的第一個響應式設計 不知道你此刻怎么想，但我熱切地渴望開始設計一個響應式網(wǎng)頁！我們已經(jīng)理解了媒體查詢的原理，那就讓我們試著駕馭它們，看看它們在實際工作中如何發(fā)揮作用。而且我正好有用來測試的項目。下面請允許我說點題外話…… 我喜歡電影。但是，我常常發(fā)現(xiàn)自己和別人的觀點不同（或許這就是我日復一日獨居一室寫代碼的原因之一），尤其是關(guān)于什么是好電影什么是爛電影。每當奧斯卡獎提名宣布的時候，我經(jīng)常會有一種強烈的惡心反胃感。我總覺得各種類型的電影都應獲得嘉獎。

媒體關(guān)注與評論

　　“看完這本書，我必須得說，這時間花得太值了。作者通過一個虛構(gòu)的網(wǎng)站，讓我們掌握所有細節(jié)?！薄　　绊憫絎eb設計具有巨大的潛在商業(yè)價值，這本書把響應式Web設計講得非常透徹?！薄　　x者評論

編輯推薦

　　前端設計人員必備教程　　圖文并茂，輕松掌握最新設計技術(shù)　　全面應用HTML5和CSS3，一步跨入最前沿

圖書封面

圖書標簽Tags

無

評論、評分、閱讀與下載

---

    響應式Web設計 PDF格式下載

---