因為有機會參與一個項目的早期設計，因此搭建的時候不可避免的遇到了如何滿足響應式的問題验游。翻閱了《響應式Web設計：HTML5和CSS3實踐》和《Implementing Responsive Design》并記錄了篇筆記平挑，以供參考瞒大，另一本書的筆記以及在項目開發(fā)中的一些心得后續(xù)會補上缤至，因為筆記在不斷更新和完善中短曾，如果有紕漏還請幫忙指正碍论。
筆記參考自《響應式Web設計：HTML5和CSS3實踐》谅猾，2013年出版內(nèi)容說不上最新。如下是全書的章的目錄：
- 第 1 章,HTML5鳍悠、CSS3 及響應式設計入門
- 第 2 章,媒體查詢
- 第 3 章,擁抱流式布局
- 第 4 章,響應式設計中的 HTML5
- 第 5 章,CSS3
- 第 6 章,用 CSS3 創(chuàng)造令人驚艷的美
- 第 7 章,CSS3 的過渡税娜、變形和動畫
- 第 8 章,用 HTML5 和 CSS3 征服表單
- 第 9 章,解決跨瀏覽器問題
第1章 HTML5、CSS3 及響應式設計入門
一些要點：
人們通過手機瀏覽網(wǎng)頁的比率在上升贼涩。手機瀏覽器瀏覽網(wǎng)頁時巧涧，會讓網(wǎng)頁縮小至可視區(qū)域（“視口”），使用者可以對感興趣的內(nèi)容再單獨放大遥倦。但是反復縮小谤绳、放大、點錯位置終究不是友好的做法袒哥。
預算充足的情況下缩筛，我們可以單獨開發(fā)“手機版”網(wǎng)站，可以在其中增強一些功能堡称，譬如根據(jù)當前GPS來挖掘出有價值數(shù)據(jù)瞎抛。多數(shù)時候，根據(jù)視口大小來匹配不同的視覺效果還是優(yōu)先選擇却紧。
響應式設計的概念最早提出是指將彈性網(wǎng)格布局桐臊、彈性圖片胎撤、媒體和媒體查詢結合起來的網(wǎng)頁開發(fā)技巧的結合。和以往的做法不同断凶，我們推薦首先對小屏幕進行設計伤提，然后逐漸增強針對大屏幕的設計和內(nèi)容。
全方位的測試響應式網(wǎng)站认烁，只需要改變?yōu)g覽器窗口大小就能完成大多數(shù)測試肿男。當然你可以下載瀏覽器的插件來做到這些，比如Chrome上可以用WindowResizer插件却嗡。
-
一些響應式開發(fā)的站點
使用HTML5和CSS3能使前端的效果實現(xiàn)變得簡單很多舶沛，但是也面臨著瀏覽器不支持的問題。我們可以用一些現(xiàn)代化的工具（庫）來修補它們窗价。
重申一點如庭，預算允許條件下完全定制的移動Web開發(fā)比響應式網(wǎng)站開發(fā)更合適，但預算有限的前提下響應式Web設計較之標準的固定寬度設計撼港，總是能夠提供更好的用戶體驗柱彻。
第2章 媒體查詢：支持不同的視口
關于媒體查詢
- 開始使用媒體查詢吧，它已經(jīng)被如此廣泛地使用和被瀏覽器所支持餐胀。
- 有了媒體查詢，我們就能對設備特性（如視口寬度）設置特定的CSS樣式瘤载。
- 媒體查詢的語法（可以拷貝如下代碼到任意CSS的文件后面否灾，然后預覽相關網(wǎng)頁的效果）。
body {
background-color: grey;
}
@media screen and (max-width: 960px) {
body {
background-color: red;
}
}
@media screen and (max-width: 768px) {
body {
background-color: orange;
}
}
@media screen and (max-width: 550px) {
body {
background-color: yellow;
}
}
@media screen and (max-width: 320px) {
body {
background-color: green;
}
}
-
在CSS2中可以通過制定<link>標簽的media屬性來為樣式表指定的設備類型（如顯示屏或者打印機）鸣奔。
<link rel="stylesheet" type="text/css" media="screen" href="screen-styles.css"> -
媒體查詢則不僅是針對設備類型墨技，還能根據(jù)設備的特性來應用樣式，如下例為檢測一塊縱向放置的顯示屏挎狸。
<link rel="stylesheet" media="screen and (orientation: portrait)" href="portrait- screen.css" /> -
你甚至可以在檢測中加上not來顛倒上例中的查詢條件扣汪。
<link rel="stylesheet" media="not screen and (orientation: portrait)" href="portrait- screen.css" /> -
也可以將多個表達式組合在一起，如下為增加了視口寬度大于800的顯示屏锨匆。
<link rel="stylesheet" media="screen and (orientation: portrait) and (min-width: 800px)" href="800wide-portrait-screen.css" /> -
更進一步還可以寫一個媒體查詢列表崭别，相互之間用逗號隔開，任何一個條件滿足就加載文件恐锣。
<link rel="stylesheet" media="screen and (orientation: portrait) and (min-width: 800px), projection" href="800wide-portrait-screen.css" /> -
除了在<head></head>中鏈接CSS文件時候使用媒體查詢茅主，我們也可以在CSS文件中使用媒體查詢。
@media screen and (max-device-width: 400px) { h1 { color: green } } -
還可以在CSS中使用@import指令引入其他的樣式表土榴，謹慎使用這種方式诀姚，因為它會增加HTTP的請求從而導致網(wǎng)頁加載速度變慢。
@import url("phone.css") screen and (max-width:360px); -
媒體查詢能使用的特性
媒體查詢中最常用的兩個特性是視口寬度width和屏幕寬度device-width玷禽，除此以外還有orientation赫段、aspect-ratio等特性可以檢測到呀打。這些特性幾乎都可以結合max和min結合來創(chuàng)建一個使用范圍。如下phone.css只有在視口寬度在200到300之間才會被引入：
@import url("phone.css") screen and (min-width:200px) and (max-width:360px); -
如何用媒體查詢來改造我們的設計
CSS名為層疊樣式表糯笙，意為后面的樣式會覆蓋前面的相同的樣式贬丛，因此我們的做法是在前面設置通用的樣式，然后用媒體查詢來進一步重寫相應部分炬丸。
-
加載媒體查詢的最佳方法
瀏覽器雖然能忽略與自身不匹配的樣式文件瘫寝，但卻不一定不下載這些文件。因此稠炬，你將樣式文件拆分到不用的樣式文件沒有太大好處（個人喜好或者方便代碼組織的目的除外）焕阿，這會增加頁面請求HTTP的數(shù)量。因此建議用如下的方式在已有的樣式表中追加媒體查詢樣式首启。
@media screen and (max-width: 768px) {/*樣式*/}
我們的第一個響應式設計
不管如何開始動手做一個響應式設計的頁面吧暮屡。這個網(wǎng)站的主題是關于電影，該書作者的初衷是這樣的“我打算自己弄一個And the winner isn't的網(wǎng)站毅桃，褒獎哪些本應該獲獎的電影褒纲，批評那些不應該獲獎的電影。這里還能視頻剪輯钥飞、經(jīng)典語錄莺掠、電影海報，以及證明我沒錯的在線調(diào)查”读宙。
1. 從固定寬度設計開始
雖然理論上是從移動（小屏幕）的體驗出發(fā)開始設計彻秆，但現(xiàn)實中更多的還是將桌面版網(wǎng)頁設計改成響應式的。既然目前和將來相當一段時間內(nèi)我們都是這么做结闸，我們還是從固定寬度開始唇兑。如下是一個固寬度的界面原型，包含了頭部桦锄、導航扎附、邊欄、內(nèi)容區(qū)和頁腳结耀。
在此我們先測驗一下HTML4標簽來測驗我們的媒體查詢技巧留夜。如下為HTML4便攜的沒有實際內(nèi)容的基本頁面結構。
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>And the winner isn't</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<!-- the header and navigation -->
<div id="header">
<div id="navigation">
<ul>
<li><a href="#">navigation1</a></li>
<li><a href="#">navigation2</a></li>
</ul>
</div>
</div>
<!-- the sidebar -->
<div id="sidebar">
<p>here is the sidebar</p>
</div>
<!-- the content -->
<div id="content">
<p>here is the content</p>
</div>
<!-- the footer -->
<div id="footer">
<p>Here is the footer</p>
</div>
</div>
</body>
</html>
然后我們?yōu)楦鱾€模塊加入了一些基本的樣式图甜。
css/main.css
#wrapper {
margin-right: auto;
margin-left: auto;
width: 960px;
}
#header {
margin-right: 10px;
margin-left: 10px;
width: 940px;
background-color: #779307;
}
#navigation ul li {
display: inline-block;
}
#sidebar {
margin-right: 10px;
margin-left: 10px;
float: left;
background-color: #fe9c00;
width: 220px;
}
#content {
margin-right: 10px;
float: right;
margin-left: 10px;
width: 700px;
background-color: #dedede;
}
#footer {
margin-right: 10px;
margin-left: 10px;
clear: both;
background-color: #663300;
width: 940px;
}
在一個視口大于960的瀏覽器中香伴，頁面的瀏覽效果如下。
2. 響應式設計中圖片應該盡可能保持精簡
為了更好的體現(xiàn)固定寬度的設計在視口大小變化時的存在的問題具则，作者對網(wǎng)頁內(nèi)容進行了美化即纲。遺憾的是作者并沒有將它放置到Github上，得要我們自己到 andthewinnerisnt 上把網(wǎng)頁內(nèi)容保存博肋，然后將還未講解到的特性等刪除低斋，以方便按順序來閱讀和增強代碼蜂厅。這里可能需要稍微花費一點時間，因為很多寫法都已經(jīng)是優(yōu)化后的了膊畴。為了繼續(xù)前進掘猿，簡單整理后頁面效果如下（跟作者網(wǎng)站沒太大區(qū)別）：
有兩點是需要了解的。
-
使用到的圖片應該盡可能小唇跨。
不論是否是響應式Web設計稠通，都應該盡可能減少圖片的大小，頭部和底部的小彩旗就是通過背景圖片的repeat-x來呈現(xiàn)的买猖。
-
關于重置樣式改橘。
各種瀏覽器渲染HTML時會有各種默認樣式，為了統(tǒng)一表現(xiàn)我們通常會導入重置樣式在主樣式文件的開頭玉控。對于HTML5飞主，normalize.css就是不錯的選擇。
你可以網(wǎng)頁窗口拉伸到小于960像素高诺，會看到內(nèi)容被截斷了碌识。同樣你可以在手機上訪問，想像一下網(wǎng)頁內(nèi)容在手機上會被截斷成什么樣（開發(fā)過程中你可以起個server讓后通過手機訪問頁面; 但是如前面章節(jié)提到的虱而，可以簡單地用Chrome的插件（個人因為在公司所有的Chrome插件都被禁用了筏餐，所以干脆使用Chrome自帶的模擬器來模擬，但是這個模擬器并不好用牡拇，頁面上進行了分辨率設置以后要反復toggle幾次emulate mobile選項才生效胖烛。嗯，如果有條件不嫌麻煩就整個真正的移動設備模擬器吧）诅迷。如下圖，在Chrome的進行如下設置众旗。
你會發(fā)現(xiàn)獲取得到的效果居然還不錯罢杉，那是因為瀏覽器默認在一定分辨率下渲染頁面，然后將網(wǎng)頁內(nèi)容縮小到了?與視口大小匹配贡歧。下一節(jié)會介紹如何阻止瀏覽器自動調(diào)整頁面大小滩租。
3. 阻止移動瀏覽器自動調(diào)整大小
IOS和Android的瀏覽器都是基于WebKit核心，這兩種瀏覽器以及其他很多瀏覽器都支持用viewport meta來覆蓋默認的畫布縮放設置利朵。
下面是一個將畫布大小放大到實際尺寸兩倍的示例：
<meta name="viewport" content="initial-scale=2.0,width=device-width, maximum-scale=3, minimum-scale= 0.5" />
在模擬器中加載該頁面可以看到如下效果律想，夸張的效果已經(jīng)說明了問題。initial-scale=2.0的意思是將頁面放大n(n=2.0)倍绍弟。device-width同時告訴瀏覽器寬度應該等于設備寬度技即。maximum-scale和minimum-scale還可以用來控制頁面的可縮放范圍。
你甚至可以禁止用戶縮放樟遣，不過因為縮放是一個很重要的輔助功能而叼，在實踐中很少使用身笤。
meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
下面是我們最終使用的meta標簽。
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
關于initial-scale要特別說明下葵陵，width=device-width設置以后瀏覽器的寬度跟媒體視口一致液荸，經(jīng)過了initial-scale=1.0的設定以后叫编，呈現(xiàn)的內(nèi)容大小就是設定的原始內(nèi)容大小滚躯，而不要瀏覽器替你收縮（這是我們進行包含了移動端響應式設計的前置條件）。
拋出另一個問題并扇，在模擬器中當我們設置initial-scale2.0的時候绊困，inspect element內(nèi)容區(qū)域比如#header大小仍舊是960px文搂，為什么不是960*2。只需要假定我們使用了一個類放大鏡的之類的東西導致看到的內(nèi)容變大了考抄。
4. 針對不同的視口寬度修正設計
我們首先為豎屏的iPad3/4增加媒體查詢细疚，同樣因為Chrome模擬器不支持豎屏設置，我們就手動設置好了川梅。如下為模擬器設置和沒有進行媒體查詢的效果疯兼。
然后我們可以增加媒體查詢和樣式設置，可以看看效果贫途。
@media screen and (max-width: 768px) {
#wrapper {
width: 768px;
}
#header, #footer, #navigation {
width: 748px;
}
}
顯示還是有一些問題吧彪，我們可以繼續(xù)優(yōu)化，如下應用以后sidebar和content都填滿了寬度丢早。
@media screen and (max-width: 768px) {
#wrapper {
width: 768px;
}
#header,#footer,#navigation {
width: 748px;
}
#content,#sidebar {
padding-right: 10px;
padding-left: 10px;
width: 728px;
}
}
5. 響應式設計中內(nèi)容始終優(yōu)先
一個設計原則是姨裸，盡可能在多平臺多視口下保留盡可能多的內(nèi)容，而不是使用display:none等類似的方法來隱藏部分內(nèi)容怨酝。同時你要意識到內(nèi)容順序的重要性傀缩，目前頁面中側邊欄和主內(nèi)容區(qū)的順序決定了側邊欄會顯示在主內(nèi)容區(qū)前面，在窄視口設備下农猬，用戶先看到主內(nèi)容再看到側邊欄顯然更加合理赡艰。因此我們將#content和#siderbar進行互換。雖然標簽換了位置斤葱，但頁面在大視口下沒有變化慷垮，但是在iPad上變成了首先顯示主內(nèi)容區(qū)，下面才是側邊欄揍堕。
在調(diào)整好標簽位置以后料身，我們還可以追加一些樣式，使在iPad上的顯示更加美觀衩茸。
@media screen and (max-width: 768px) {
#wrapper,#header,#footer,#navigation {
width: 768px;
margin: 0px;
}
#logo {
text-align:center;
}
#navigation {
text-align: center;
background-image: none;
border-top-color: #bfbfbf;
border-top-style: double;
border-top-width: 4px;
padding-top: 20px;
}
#navigation ul li a {
background-color: #dedede;
line-height: 60px;
font-size: 40px;
}
#content, #sidebar {
margin-top: 20px;
padding-right: 10px;
padding-left: 10px;
width: 728px;
}
.oscarMain {
margin-right: 30px;
margin-top: 0px;
width: 150px;
height: 394px;
}
#sidebar {
border-right: none;
border-top: 2px solid #e8e8e8;
padding-top: 20px;
margin-bottom: 20px;
}
.sideBlock {
width: 46%;
float: left;
}
.overHyped {
margin-top: 0px;
margin-left: 50px;
}
}
6. 媒體查詢只是響應式開發(fā)的必要條件之一
盡管我們針對iPad上做了媒體查詢和樣式設置芹血，網(wǎng)站在低分辨率上的iPhone的視口上顯示的仍舊很糟糕。我們雖然使用媒體查詢對視口寬度小于768像素應用了樣式，但是介于768到960像素之間的設備祟牲，則沒有對應的媒體查詢代碼隙畜，內(nèi)容因此會被剪切掉。
目前的情形是说贝，我們針對特定的斷點設置了媒體查詢?nèi)缓笫共季职l(fā)生變化议惰，但是捕捉到下一個視口斷點之前，頁面靜止不變乡恕。我們需要更好的策略言询，能夠在斷點導致的效果突變之前保持伸縮。如何做到這點傲宜，正是下一章的內(nèi)容：將呆板的固定布局修改成靈活的流動布局运杭。
第3章 擁抱流式布局
1. 為什么固定布局經(jīng)不起考驗
我們使用固定布局，當不同的視口出現(xiàn)的時候函卒，你可以單獨增加媒體檢測辆憔，但未來會有更多大小不一的視口出現(xiàn)。
2. 為什么響應式布局需要百分比設計
使用百分比布局創(chuàng)建流動的彈性界面报嵌，同時使用媒體查詢來限制元素的變動訪問虱咧，將這兩者組合一起構成了響應式設計的核心，基于此可以真正創(chuàng)造出真正完美的設計锚国。
3. 將網(wǎng)頁從固定布局修改為百分比布局
在可預見的未來腕巡，我們的網(wǎng)頁制作都是基于設計圖的度量元素的大小、外邊距來寫CSS代碼血筑。我們該如何將固定尺寸轉換為相對尺寸呢绘沉？
3.1 需要牢記的公式
目標元素寬度 / 上下文元素寬度 = 百分比寬度
3.2 設置百分比元素的上下文
在我們的例子中，#wrapper是內(nèi)容區(qū)豺总、側邊欄车伞、頁腳設定寬度的上下文，我們需要給他們設定百分比值喻喳。當然你也可以給#wrapper設定一個百分比另玖，對于#wrapper而言，百分比是相對于視口尺寸而言的沸枯。
我們先來看看頭部，#header（目標元素）寬度為940像素赂弓，#wrapper（上下文元素）寬度為940像素绑榴。按照計算公司得到的結果是0.979166667，設置到CSS中是：
width: 97.9166667%; /* 940 ÷ 960 */
同樣的設置可以被應用到#navigation和#footer中盈魁。
再來看#content和#sidebar翔怎，比如我自己改寫的例子中#content的寬度為666像素，#siderbar為220個像素，計算得到百分比分別為：666/960*100=69.375%和（220-2)/960*100%=22.708333333333332%（2像素為border-right的值）赤套。
接下來繼續(xù)使用飘痛，將頁面各處10像素的內(nèi)邊距、外邊距也替換為等價的百分比容握，所有這些間距都是基于960像素的上下文宣脉，替換成對應的百分比就是：1.0416667%(10/960)。
3.3 必須時刻牢記上下文
一個需要注意的問題是百分比設置的上下文剔氏，在該書的例子中的導航欄中有ul>li>a的結構塑猖，我們給a設定了margin-right:25px來控制導航元素之間的間距。但是使用上述的公式將固定限速設置為百分比后發(fā)現(xiàn)并不起作用谈跛。因沒有為li設定寬度羊苟，子節(jié)點a找不到上下文的寬度。對此解決辦法有很多感憾，其中一種是直接將margi-right屬性設置到li上來蜡励，以為內(nèi)ul是有設置寬度的。
3.4 用em換成px
最初設計師們使用em是因為在老版本的Internet Explorer無法縮放像素單位的文字阻桅。但現(xiàn)代瀏覽器早就支持了凉倚，那么用em替代px還有什么優(yōu)越性呢。有兩點理由：
（1）那:wq些使用Internet Explorer的用戶也能夠縮放文字
（2）這樣做使設計師們的工作變得更加簡單
em的實際大小是相對于上下文字體大小而言的鳍刷，如果我們給body標簽設置的文字大小是100%占遥，給其他的文字都使用相對單位em，那么這些字體都會受到body上的初始聲明的影響输瓜。這樣做的好處是瓦胎，如果完成了所有文字排版以后客戶提出希望把字體整體調(diào)大一些，那么我們只需要修改body的文字大小其他所有文字都會相應變化尤揣。
同樣搔啊，目標元素尺寸 / 上下文元素尺寸 = 百分比尺寸 這個公式也適用于將文字的像素單位轉換為相對單位。現(xiàn)代瀏覽器的默認字體大小都是16像素(作者疏漏了還是過時了明明是14好么)北戏，因此一開始給body標簽應用如下任何一條規(guī)則都是一樣的效果：
font-size: 16px;
font-size: 100%;
font-size: 1em;
舉一個例子负芋，我們?yōu)闉榫W(wǎng)站標題設置了如下樣式：
#logo {
display: block;
padding-top: 75px;
color: #0d0c0c;
text-transform: uppercase;
font-family: Arial, "Lucida Grande", Verdana, sans-serif font-size: 48px;
}
#logo span {
color: #dfdada;
}
因為48/16=3,我們可以對字體大小進行改動：
font-size: 3em; /* 48 ÷ 16 = 3*/
如果應用這個規(guī)則除了毛病，通常是目標元素的上下文發(fā)生了變化嗜愈，以頁面中的標簽為例：
<h1>Every year <span>when I watch the Oscars I'm annoyed...</span></h1>
修改后的相對單位樣式如下：
#content h1 {
font-family: Arial, Helvetica, Verdana, sans-serif; text-transform: uppercase;
font-size: 4.3125em; /* 69 ÷ 16 */
}
#content h1 span {
display: block;
line-height: 1.052631579em; /* 40 ÷ 38 */
color: #757474;
font-size: .550724638em; /* 38 ÷ 69 */
}
可以看到旧蛾，span的元素大小是相對于其父元素的文字的大小，而它的行高是相對于文字本身的大小蠕嫁。
3.5 彈性圖片
現(xiàn)代瀏覽器下要實現(xiàn)圖片隨著流動布局相應縮放大小只需要在CSS中做如下聲明：
img {
max-width: 100%;
}
也可以把這個技術應用到其他多媒體標簽上：
img,object,video,embed {
max-width: 100%;
}
但我們也面臨著一個問題锨天，不論多大的視口都要下載同一張圖片（當然是一張為了兼容大視口的大圖片）未免有些浪費寬帶。
讓圖片隨視口縮放
將奧斯卡圖像的固定寬高刪掉剃毒，并設置一個百分比病袄，然后可以拉伸頁面試一把效果搂赋。
.oscarMain {
float: left;
margin-top: -28px;
width: 28.9398281%; /* 202 ÷ 698 */
}
給彈性圖片設置閾值
當我們把窗口超過一定分辨率時，圖片也被拉拉大了益缠，我們可以追加一個特定樣式來為圖片設定閾值脑奠。
.oscarMain {
float: left;
margin-top: -28px;
width: 28.9398281%; /* 698 ÷ 202 */
max-width: 202px;
}
超級全能的max-width屬性
另一種限制頁面無限擴展的方法是給最外層的#wrapper增加max-width屬性（有使用過Bootstrap的應該不會陌生），如下所示：
#wrapper {
margin-right: auto;
margin-left: auto;
width: 96%; /* Holding outermost DIV */
max-width: 1414px;
}
這意味著也頁面會縮放至視的96%幅慌，但絕不會超過1414像素寬宋欺。
3.6 為不同的屏幕尺寸提供不同的圖片
跟目前工作關聯(lián)不大，暫且跳過欠痴。
作者推薦了Matt Wilco的做法迄靠，大致思路是由服務器端去生成各種尺寸的圖片，并且根據(jù)客戶端發(fā)送過來的關于resolution大小的信息來決定返回什么尺寸的圖片喇辽。
3.7 流動布局和媒體查詢的默契配合
本章前面掌挚，我們的導航鏈接在特定的視口寬度下會折成兩行，我們可以使用媒體查詢來修正這個問題菩咨。
@media screen and (min-width: 1001px) and (max-width: 1080px) {
#navigation ul li a { font-size: 1.4em; }
}
@media screen and (min-width: 805px) and (max-width: 1000px) {
#navigation ul li a { font-size: 1.25em; }
}
@media screen and (min-width: 769px) and (max-width: 804px) {
#navigation ul li a { font-size: 1.1em; }
}
媒體查詢約束流動布局的變動范圍吠式，而流動布局則簡化了從一組媒體查詢樣式過渡到另一組的過渡過程。
3.8 CSS網(wǎng)格系統(tǒng)
該章節(jié)介紹了比較流行的幾種網(wǎng)格系統(tǒng)抽米，并用其中一種實現(xiàn)了我們之前所繪的頁面特占。因為閱讀這本書的時候，Bootstrap已經(jīng)大行其道并前端開發(fā)者所熟知了云茸，就不贅述該書的示例了是目。但是有一點要注意，Bootstrap這樣的網(wǎng)格系統(tǒng)為我們提供了通過比如cols-md-*等樣式提供了寬度标捺、字體大小等的預設懊纳，但在要求嚴格按照設計實現(xiàn)界面的情況下，我們還是要自己來設置它們亡容。
第4章 響應式設計中的HTML5
本章概覽式地介紹了一些HTML5相關知識嗤疯，更多偏向概念和引導性，操作性不強闺兢。
大多數(shù)網(wǎng)站可以采用HTML5來編寫茂缚。
polyfill腳本：通常指的是一段能給老版本瀏覽帶來新特性的JavaScript代碼。
Modernizr是一個很常用的相對polyfill更加增強了的腳本庫屋谭。
時間緊迫可以考慮使用HTML5樣板文件脚囊。里面包含了基本樣式normalize.css、polyfill和一些必要的工具如Modernizr桐磁。
前端開發(fā)工具基本都包含了迅速生成基本文件的功能悔耘，這里只稍微對比一下兩個lang和charset的含義：lang="en"指的是語言，比如中文所意、英文淮逊；<meta charset="UTF-8">指的是字符集，可用的類型可就多了只對中文這種語言就有很多種字符集可用扶踊。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
HTML5的標簽是可以簡略地書寫的泄鹏，并且一些不符合XHTML1.0的寫法也不會有任何問題，但我們還是推薦盡可能標準的方式來書寫HTML代碼秧耗，并且盡可能找到一個平衡：類似于<link>的type屬性可以省略备籽，但標簽要記得閉合并且給屬性加上引號。
有一些標簽在HTML5中被廢棄了分井，你也許很多都沒有用到過车猬，但是記住要盡可能采用CSS的方式來實現(xiàn)效果，而不是之前的在標簽上加屬性的方式尺锚。
-
HTML5增加了一些全新的語義化元素珠闰，為什么語義化很重要，因為在以前的做法中我們通過給div家id和class能夠讓其他人在閱讀代碼的時候很好地理解代碼瘫辩，但是對機器而言就不那么簡單了伏嗜。HTMl5旨在用全新的語義化標簽來解決這個問題。如下是一些語義化標簽的列表（不打算詳細記錄伐厌，那樣也沒有意義）：
- section
- nav
- article
- aside
- hgroup
- header
- footer
- address
HTML5的很多容器都有自己獨立的大綱結構承绸，這意味著你不用總是去想現(xiàn)在是幾級標題，不同父級容器會給不同的標題相應的大小樣式挣轨，你只需要在容器中任意使用就好军熏。
有一些網(wǎng)頁工具可以用來測試生成的網(wǎng)頁的大綱結構（個人認為對于排版不佳、長久未讀的代碼還是有些幫助的）卷扮。
可以嘗試著把之前自己構建的網(wǎng)頁的元素替換成header荡澎、nav、footer画饥，然后修改對應的css中的選擇器衔瓮。
HTMl5中的文本語義級元素如b, em, i以前會是用來添加文本樣式的并且不推薦為了做樣式而使用它們，但是現(xiàn)在通常有了新的語義可以自己查詢看抖甘，不贅述热鞍。
遵循WAI-ARIA是指無障礙網(wǎng)頁應用技術，來讓殘障人士能夠訪問網(wǎng)頁中的動態(tài)內(nèi)容衔彻，實現(xiàn)這些技術包含的內(nèi)容有很多薇宠，這里只簡單提一下會用到的一些，比如地標角色landmark role（也就是在很多頁面中看到的role="navigation/application/banner/form"等）可以讓屏幕閱讀器在不同的頁面區(qū)塊之間輕松跳轉艰额。
Apple公司拒絕在IOS設備上支持Flash的時候極大的促進了HTMl5的發(fā)展澄港。
-
使用HTML5方法為頁面添加視頻或者音頻
- 因為早起瀏覽器內(nèi)置視頻格式的爭議，目前很多瀏覽器支持的不同的格式的視頻或音頻柄沮，為了解決這個問題我們可能會為這個視頻或音頻創(chuàng)建多個版本回梧，并都嵌套在video標簽中废岂。
- 為了給IE8以及更低版本的瀏覽器提供備用方案，你可能還需要追加一個Flash甚至媒體文件的下載鏈接狱意。
- audio和video的標簽用法基本一致湖苞。
-
響應式視頻
- 給視頻設置固定寬高，當頁面被拉伸的時候详囤，似乎就不怎么響應式了财骨，你可以就本書的例子或者W3C上找一個例子試一試。通過給視頻設置max-width: 100%的方法能夠解決這個問題（本書前面章節(jié)針對圖片有提到過這個解決方案）藏姐。
-
離線Web應用
- 對于一些應用需要在離線狀態(tài)下能夠正常使用隆箩。比如一個筆記應用，當用戶的手機網(wǎng)絡斷開時羔杨，可能正在編輯一篇筆記捌臊，通過使用Web離線功能他就能夠繼續(xù)編輯筆記，等到網(wǎng)絡連接上的時候再把內(nèi)容同步到網(wǎng)絡上兜材。
- HTML5離線應用的運行機制是：為每個需要離線使用的網(wǎng)頁都制定一個.mainfest文件娃属，這個文件羅列了該網(wǎng)頁離線使用時所需要的的所有資源文件。支持離線Web應用的瀏覽器會自動讀取.mainfest文件护姆，下載所羅列的資源列表并緩存至本地以備網(wǎng)絡斷開時使用矾端。
第6章 用CSS3創(chuàng)造令人驚艷的美
一點小感受：總覺得自發(fā)的細致閱讀一本書是很沒有動力來源和成效的事情，因為沒有應用到具體項目中卵皂，你不會想深究秩铆。目前所看的這些章節(jié)除了前三章外即時如此，其實只需要有個概念在腦袋中灯变，真的用到的時候有搜索引擎在手然后就行了殴玛。急切想翻閱完畢要開始看Linux相關的書籍了~ 以下為第6章簡略筆記：
- 使用CSS3可以替代圖片減少http請求。
- 需要添加瀏覽器私有前綴來保證最大的瀏覽器兼容性添祸，或者使用一些JavaScript滚粟，它會自動為CSS3追加瀏覽器私有前綴。
6.1 文字陰影
-
text-shadow: 1px 1px #cccccc;參數(shù)分別表示右側陰影大小刃泌，下側陰影大小凡壤，模糊距離）。 - 顏色可以使用hex耙替、hsl亚侠、rgb顏色。
- 大小可以使用px俗扇、em硝烂、rem。
- 還可以用逗號分隔的方式使用多重文字陰影铜幽。
6.2 盒陰影
- 盒陰影的語法和文字陰影完全一樣滞谢。
- 可以將text-shadow后的第一個參數(shù)指定為inset來設置內(nèi)陰影串稀。
- 同樣可以設置多重陰影。
6.3 背景漸變
- 線性背景漸變狮杨，方法為設定起點厨诸、過渡點、終點的顏色方案禾酱。
- 徑向背景漸變，可以設置發(fā)散形式的漸變绘趋，可選擇的類型（圓颤陶、橢圓等）很多，能做出很酷炫的效果陷遮。
- 重復漸變滓走。
6.4 背景漸變圖案
- 有一些家伙用CSS的背景技術制作了一些圖案能夠在背景中漸變，沒有美工或者帶寬有限減少用大圖的時候帽馋，或許是個選擇搅方。
6.5 CSS3的響應性
- 針對上述學習的特性，務必記得針對不同的視口做不同的聲明绽族。
- 為了瀏覽器兼容性姨涡，書寫CSS3需要私有前綴，還有一種快速編寫CSS3的方法吧慢，就是使用CSS預處理器涛漂，比如最流行的SASS和LESS（聞名已久未曾用過）。
6.6 組合使用CSS3屬性
略（結合該書開篇的案例來操作一把上面的新屬性）检诗。
6.7 多重背景圖片
- 在CSS3中我們可以使用多重背景匈仗，各自有個子的大小和位置，相互之間用逗號隔開就行逢慌。
6.8 更多CSS特性
- 上面是介紹的只是CSS3的一小部分但屬于最常用的悠轩。
6.9 可縮放圖標：響應式設計中的完美選擇
- @font-face圖標就是將字符做成圖標的特定字體，以往我們的需要使用很多的圖標圖片攻泼，或者組合成一張很大的圖火架，現(xiàn)在只需要用一種字體就涵蓋所有需要的圖標。比較流行的比如font-awesome就是這樣的原理（哦忙菠，原來如此~）距潘。
第7章 CSS3過渡、變形和動畫
7.1 什么是CSS3過渡以及如何使用它
一個超鏈接默認設置了一個樣式只搁，當鼠標hover上去的時候可能會應用到另外一個樣式音比，這就是一個過渡。過渡可以針對屬性來過渡氢惋，比如當hover發(fā)生時候過渡洞翩。
-
過渡涉及四個屬性：
- transition-property 要過渡的屬性名稱稽犁，比如background-color或all
- transition-duration 定義過渡效果持續(xù)的時間
- transition-timing-function 定義過渡期間速度如何變化
- transition-delay 可選，定義過渡開始前的延遲事件
-
單獨使用各種過渡屬性創(chuàng)建效果的語法如下：
#content a { transition-property: all; transition-duration: 1s; transition-timing-function: ease; transition-delay: 0s; } -
簡寫語法如下
transition: all 1s ease 0s; -
也可以在不同的時間段內(nèi)過渡不同的屬性
#content a { /* other setting */ transition-property: border, color, text-shadow; transition-duration: 2s, 3s, 8s; } 過渡調(diào)速函數(shù)骚亿，不太理解可以參考這里
7.2 CSS3中的2D變形
- 有兩種可用的CSS3變形：2D變形和3D變形已亥。其中2D變形實現(xiàn)更廣泛，它允許我們使用如下變形：
- scale：用來縮放大小
- translate：在屏幕內(nèi)移動元素
- rotate：按照一定的角度旋轉元素
- skew：按照X和Y軸對元素進行斜切
- matrix：將上述若干變形效果組合成單個聲明来屠，并允許你用像素精度來控制變形效果
- 實際項目中可以使用傻瓜矩陣變形工具來完成這樣的事情虑椎。
- transform-origin可以用來修改變形效果的起點。
7.3 嘗試CSS3的3D形變
- CSS3的3D形變能創(chuàng)造非尘愕眩酷的效果捆姜，但相對2D的瀏覽器支持性要差一些。
7.4 CSS3動畫效果
如下是一個給h5加上陰影動畫的例子迎膜，最開始定義一個關鍵幀的名字泥技，以及在動畫進行到多少的時候的效果，然后在元素h5應用磕仅。當然如果想要在特定瀏覽器上執(zhí)行珊豹，得要給 @keyframes 和 animation 都加上私有前綴。
@keyframes warning {
from {
text-shadow: 0px 0px 4px #000000;
}
50% {
text-shadow: 0 0 40px #000000;
}
to {
text-shadow: 0 0 4px #000000;
}
}
.back h5 {
font-size: 4em;
color: #f2050b;
text-align: center;
animation: warning 1.5s infinite ease-in;
}
動畫可以采用的參數(shù)有七個可以獨立設置的屬性值榕订，除了像下面這樣列出來你也可以像上例那樣寫縮寫店茶。
animation-name: warning;
animation-duration: 1.5s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-play-state: running;
animation-delay: 0s;
animation-fill-mode: none;
CSS3過渡讓效果的初始按照可定義的速度進行，形變使使得元素大小劫恒、偏移等值脫離初始忽妒，動畫則定義了一個變化的過程，三者結合起來能產(chǎn)生非常豐富的效果兼贸。 該書示例有結合示例進行演示段直，在此跳過，有興趣可以自己參考~
7.5 本章小結
本章學習了CSS3過渡溶诞、形變和動畫的內(nèi)容鸯檬，學習這些新特性的最終目的是使用CSS3來替代JavaScript制作一些優(yōu)雅降級的增強效果，從而使代碼更簡潔和豐富螺垢。下一章將開始學習表單中HTML5和CSS3的應用喧务。
第8章 用HTML5和CSS3征服表單
8.1 HTML5表單
HTML5表單不僅包含了一些新的視覺元素，還具備了基本的客戶端驗證的功能枉圃，而過去這些一般都需要依賴JavaScript功茴。如下列舉了這些新的表單特性：
8.1.1 一個示例表單構建
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 首先定義了一個id為redemption的表單 -->
<form id="redemption" method="post">
<!-- hgroup中的h1和h2用于顯示標題和說明文字 -->
<hgroup>
<h1>Oscar Redemption</h1>
<h2>Here's your chance to set the record straight: tell us what
year the wrong film got nominated, and which film <b>should</b>
have received a nod...</h2>
</hgroup>
</form>
<fieldset>
<legend>About the offending film (part 1 of 3)</legend>
<div>
<label for="film">The film in question?</label>
<input id="film" name="film" type="text" placeholder="e.g. King 3
Kong" required aria-required="true" >
</div>
</fieldset>
</body>
</html>
因為書中的例子其實并沒有提供連貫的例子，如下只貼出一些片段用于粘貼在上面的表單示例中方便查看效果孽亲。
8.1.2 placeholder
占位符是HTML5表單中非常頻繁被使用的一個屬性坎穿，輸入框獲取焦點后會自動消失。
8.1.3 required
為確保表單必須輸入值，可以添加required屬性玲昧，當輸入不符合條件時候瀏覽器會給出提示栖茉，并且表單默認不會提交。注：aria-required是為了方便屏幕閱讀器用戶孵延，第四章有介紹過WAI-ARIA吕漂。
8.1.4 autofocus
autofocus可以讓表單加載完成時就有一個表單域被默認自動聚焦。
<fieldset>
<legend>autofocus example</legend>
<div>
<label for="search">Search the site...</label>
<input id="search" name="search" type="search" placeholder="Wyatt Earp"
autofocus>
</div>
</fieldset>
8.1.5 autocomplete
很多瀏覽器提供了自動完成功能來幫助用戶完成輸入尘应，但是通常會關閉這個功能惶凝，因為它不僅能保護敏感數(shù)據(jù)（例如銀行卡賬戶），還可以讓用戶用心填寫表單而不是隨便輸入一個值（使用者可能通過自動完成來選擇曾填寫過的假的電話號碼）犬钢。
下面的代碼是一個禁止自動完成的表單項：
<fieldset>
<legend>autocomplete example</legend>
<div>
<label for="tel">Telephone (so we can berate you if you're wrong)</label>
<input id="tel" name="tel" type="tel" placeholder="1-234-546758" autocomplete="off" required aria-required="true" >
</div>
</fieldset>
也可以給表單本身設置屬性來禁止整個表單的自動完成功能：
<form id="redemption" method="post" autocomplete="off">
autofus可以讓表單加載完成時就有一個表單被默認自動聚焦苍鲜。
8.1.6 list及對應的detail元素
<fieldset>
<legend>list example</legend>
<div>
<label for="awardWon">Award Won</label>
<input id="awardWon" name="awardWon" type="text" list="awards">
<datalist id="awards">
<select>
<option value="Best Picture"></option>
<option value="Best Director"></option>
<option value="Best Adapted Screenplay"></option>
<option value="Best Original Screenplay"></option>
</select>
</datalist>
</div>
</fieldset>
使用了list屬性的輸入框看起來就是一個普通的文本輸入框，list屬性的值就是datalist元素的id娜饵，開始輸入時會顯示一個數(shù)據(jù)選擇框。注：使用select包裹option是為了便于老版本瀏覽器的降級官辈。
8.1.7 HTML5的新輸入類型
- 郵箱地址
<input type="email" /> - 數(shù)字
<input type="number"/> - URL地址
<input type="url"/> - 電話號碼
< input type="tel"/> - 搜索輸入框
<inputtype="search"/>和普通文本框表現(xiàn)一樣只是個別瀏覽器渲染上有細微差別 - 正則表達式
<input pattern="([a-zA-Z])"/> - 顏色選擇器
<input type="color"目前很少瀏覽器支持該特性（@13年） - 滑動條
<input type="range" min="1" max = "10" />
8.1.8 日期和時間輸入類型
如下多種的日期時間輸入類型提供了不同的度量單位箱舞，輸出結果值會略有不同：
- date
- month
- week
- time
- datetime和datetime-local
8.2 如何給不支持新特性的瀏覽器打補丁
盡管說了很多HTML5表單的新特新，但實際使用的時候 （1）支持表單新特性的瀏覽器在具體實現(xiàn)上有所不同（2）對完全不不支持新特的瀏覽器如何處理拳亿。
第四章提過一個Modernizr的JavaScript框用于向缺少HTML5/CSS3特性支持的瀏覽器打補丁晴股，Webshims Lib就是構建于Modernizr和jQuery之上的。
它利用了Modernizr的加載功能肺魁，只加載實際所需要的補丁电湘。
通過打補丁不僅使老版本的瀏覽器受益，很多新的劉瀏覽器也沒有完全實現(xiàn)HTML5的表單特性鹅经，網(wǎng)頁中引入Webshims Lib可以修補這些瀏覽器的缺陷寂呛。
Webshims Lib的使用很簡單：
- 下載Webshims Lib包，解壓
- 從包解壓出來的文件夾中導入依賴的jQuery瘾晃、Modernizr贷痪、polyfiller文件
- 執(zhí)行javascript:
$.webshims.polyfill()來初始化腳本用于加載所需的補丁
8.3 使用CSS3美化HTML5表單
作者使用第七章介紹的CSS3知識，用類似圓角蹦误、陰影等屬性稍微潤色了下表單劫拢，此處略過。除了之前學習的CSS3屬性外强胰，CSS3還專門提供了一些針對表單的偽類選擇器：
- input:required
- input:focus:invalid
- input:focus:valid
可以通過這些偽類來書寫一些樣式規(guī)則舱沧，從而增強表單的用戶體驗。
8.4 小結
本章學習了如何使用一堆新的HTML5表單屬性偶洋，從而讓表單更加好用熟吏。并且我們介紹了如何使用工具來進行JavaScript對象檢測有條件地加載JavaScript補丁腳本，從而保證這些在新舊瀏覽器上都能提供類似的用戶體驗玄窝。
