本文關(guān)鍵詞：響應(yīng)式Web設(shè)計(jì)：HTML5和CSS3實(shí)戰(zhàn)，由筆耕文化傳播整理發(fā)布。

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

作者：Ben Frain

分類(lèi)：科技 互聯(lián)網(wǎng) 計(jì)算機(jī)技術(shù)

豆瓣評(píng)分：

簡(jiǎn)介：

隨著iPad mini的發(fā)布，又一個(gè)新的屏幕尺寸誕生了。用不著全面統(tǒng)計(jì)，你就會(huì)發(fā)現(xiàn)移動(dòng)互聯(lián)網(wǎng)時(shí)代眾多的屏幕規(guī)格，從智能手機(jī)的3、4、5英寸，到平板電腦的7、8、9、10英寸，再到筆記本和臺(tái)式機(jī)的13至30英寸，絕非目前單一的固定或流式布局所能應(yīng)付。于是，響應(yīng)式設(shè)計(jì)應(yīng)運(yùn)而生，而且它也將成為移動(dòng)互聯(lián)網(wǎng)時(shí)代前端設(shè)計(jì)與開(kāi)發(fā)人員的一門(mén)必修課。

本書(shū)堪稱(chēng)學(xué)習(xí)響應(yīng)式Web設(shè)計(jì)的難得佳作。它不僅全面、細(xì)致、圖文并茂地介紹了響應(yīng)式設(shè)計(jì)相關(guān)的技術(shù)，比如媒體查詢(xún)、流式布局、彈性媒體和彈性字體等，還把近幾年來(lái)Web設(shè)計(jì)領(lǐng)域公認(rèn)的最佳設(shè)計(jì)理念有機(jī)地融入到了實(shí)例當(dāng)中，比如移動(dòng)先行（Mobile First）、漸進(jìn)增強(qiáng)、平穩(wěn)退化、無(wú)障礙設(shè)計(jì)等。更加難得的是，本書(shū)以設(shè)計(jì)跨屏幕的網(wǎng)頁(yè)（響應(yīng)式設(shè)計(jì)）為出發(fā)點(diǎn)，以點(diǎn)帶面，把如今Web設(shè)計(jì)領(lǐng)域兩大標(biāo)準(zhǔn)的最新版本HTML5和CSS3也納入其中，讀者在掌握先進(jìn)設(shè)計(jì)方法的同時(shí)也能掌握最新的設(shè)計(jì)技術(shù)（比如使用新的HTML5結(jié)構(gòu)化語(yǔ)義標(biāo)記、嵌入媒體、響應(yīng)式視頻，以及CSS3的新選擇器、特效、過(guò)渡、變形和動(dòng)畫(huà)等），從而可以免除重復(fù)學(xué)習(xí)新標(biāo)準(zhǔn)之苦，讓自己一步跨入Web設(shè)計(jì)領(lǐng)域的最前沿。無(wú)論你想學(xué)習(xí)響應(yīng)式Web設(shè)計(jì)，還是學(xué)習(xí)HTML5和CSS3的實(shí)際應(yīng)用，本書(shū)都能滿足你的需要，是毋庸置疑的明智之選。

說(shuō)到底，，響應(yīng)式Web設(shè)計(jì)并非一門(mén)獨(dú)立的技術(shù)，而只是現(xiàn)有技術(shù)的一個(gè)組合應(yīng)用。只要有一點(diǎn)HTML和CSS基礎(chǔ)的讀者都能順利地掌握它。對(duì)于中、高級(jí)的前端設(shè)計(jì)和開(kāi)發(fā)人員，翻閱本書(shū)也有助于理清自己的知識(shí)脈絡(luò)，對(duì)這個(gè)新的設(shè)計(jì)理念獲得更全面、深入的理解和把握。

下載

注：如果下載失敗，請(qǐng)聯(lián)系小編，微信或QQ：2338856113

作者簡(jiǎn)介

Ben Frain是一名具有十多年經(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ù)的刊物撰稿。

在此之前，他曾是一名懷才不遇的（而且謙虛謹(jǐn)慎的）電視演員，畢業(yè)于索爾福德大學(xué)的媒體與表演專(zhuān)業(yè)。他寫(xiě)了四部（自認(rèn)為）同樣被低估的劇本，而且始終心懷能賣(mài)出一部的信念（盡管不像最初那么強(qiáng)烈了）。

工作之余，在身體（和妻子）允許的情況下，他喜歡玩室內(nèi)足球。

目錄

第1章 　HTML5、CSS3及響應(yīng)式設(shè)計(jì)入門(mén)　　1

1.1 　為什么智能手機(jī)很重要（而老版的IE不再重要）　　2

1.2 　響應(yīng)式設(shè)計(jì)一定是最佳選擇嗎　　3

1.3 　響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的定義　　3

1.4 　為什么要在響應(yīng)式設(shè)計(jì)上停滯不前　　4

1.5 　響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)示例　　4

1.5.1 　下載視口調(diào)試工具　　4

1.5.2 　在線創(chuàng)意源泉　　11

1.6 　為什么HTML5很優(yōu)秀　　12

1.6.1 　省時(shí)省力　　12

1.6.2 　新增了語(yǔ)義化標(biāo)簽元素　　13

1.7 　CSS3為響應(yīng)式設(shè)計(jì)和更多創(chuàng)新奠定了基礎(chǔ)　　13

1.7.1 　底線：CSS3不破壞任何東西　　14

1.7.2 　CSS3如何解決日常設(shè)計(jì)問(wèn)題　　14

1.8 　看吶，不用圖片　　17

1.9 　HTML5和CSS3現(xiàn)在就能用嗎　　20

1.10 　響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)不是靈丹妙藥　　20

1.11 　引導(dǎo)客戶：網(wǎng)站不必在所有瀏覽器中表現(xiàn)一致　　21

1.12 　小結(jié)　　22

第2章 　媒體查詢(xún)：支持不同的視口　　23

2.1 　現(xiàn)在就能使用媒體查詢(xún)　　23

2.2 　為什么響應(yīng)式設(shè)計(jì)需要媒體查詢(xún)　　24

2.2.1 　媒體查詢(xún)語(yǔ)法　　24

2.2.2 　 媒體查詢(xún)能檢測(cè)那些特性　　26

2.2.3 　用媒體查詢(xún)改造我們的設(shè)計(jì)　　27

2.2.4 　加載媒體查詢(xún)的最佳方法　　27

2.3 　我們的第一個(gè)響應(yīng)式設(shè)計(jì)　　27

2.3.1 　我們的設(shè)計(jì)是固定寬度的，不要驚訝　　28

2.3.2 　響應(yīng)式設(shè)計(jì)中要保證圖片盡可能精簡(jiǎn)　　32

2.3.3 　小視口下的內(nèi)容剪切　　33

2.4 　阻止移動(dòng)瀏覽器自動(dòng)調(diào)整頁(yè)面大小　　34

2.5 　針對(duì)不同視口寬度修正設(shè)計(jì)　　37

2.6 　響應(yīng)式設(shè)計(jì)中內(nèi)容始終優(yōu)先　　38

2.7 　媒體查詢(xún)只是必要條件之一　　42

2.8 　小結(jié)　　42

第3章 　擁抱流式布局　　43

3.1 　固定布局經(jīng)不起未來(lái)考驗(yàn)　　43

3.2 　為什么響應(yīng)式設(shè)計(jì)需要百分比布局　　44

3.3 　將網(wǎng)頁(yè)從固定布局修改為百分比布局　　44

3.3.1 　需要牢記的公式　　45

3.3.2 　設(shè)置百分比元素的上下文　　47

3.3.3 　必須時(shí)刻牢記上下文　　52

3.4 　用em替換px　　54

3.5 　彈性圖片　　56

3.5.1 　讓圖片隨視口縮放　　56

3.5.2 　為特定圖片指定特定規(guī)則　　58

3.5.3 　給彈性圖片設(shè)置閾值　　59

3.5.4 　超級(jí)全能的max-width屬性　　61

3.6 　為不同的屏幕尺寸提供不同的圖片　　61

3.7 　流動(dòng)網(wǎng)格布局和媒體查詢(xún)的默契配合　　66

3.8 　CSS網(wǎng)格系統(tǒng)　　66

3.9 　小結(jié)　　72

第4章 　響應(yīng)式設(shè)計(jì)中的HTML5　　73

4.1 　HTML5的哪些部分現(xiàn)在就能用　　73

4.1.1 　大多數(shù)網(wǎng)站可以用HTML5編寫(xiě)　　74

4.1.2 　膩?zhàn)幽_本和Modernizr　　74

4.2 　如何編寫(xiě)HTML5網(wǎng)頁(yè)　　75

4.2.1 　HTML5的精簡(jiǎn)之道　　76

4.2.2 　HTML5標(biāo)簽的合理寫(xiě)法　　76

4.2.3 　偉大的

  本文關(guān)鍵詞：響應(yīng)式Web設(shè)計(jì)：HTML5和CSS3實(shí)戰(zhàn)，由筆耕文化傳播整理發(fā)布。