筆記參考自《響應(yīng)式Web設(shè)計(jì)：HTML5和CSS3實(shí)踐》，2013年出版內(nèi)容說不上最新锡移。如下是全書的章的目錄：
第 1 章,HTML5窄做、CSS3 及響應(yīng)式設(shè)計(jì)入門
第 2 章,媒體查詢
第 3 章,擁抱流式布局
第 4 章,響應(yīng)式設(shè)計(jì)中的 HTML5
第 5 章,CSS3
第 6 章,用 CSS3 創(chuàng)造令人驚艷的美
第 7 章,CSS3 的過渡几缭、變形和動(dòng)畫
第 8 章,用 HTML5 和 CSS3 征服表單
第 9 章,解決跨瀏覽器問題
第1章 HTML5、CSS3 及響應(yīng)式設(shè)計(jì)入門
一些要點(diǎn)：
人們通過手機(jī)瀏覽網(wǎng)頁的比率在上升茶行。手機(jī)瀏覽器瀏覽網(wǎng)頁時(shí)，會(huì)讓網(wǎng)頁縮小至可視區(qū)域（“視口”）登钥，使用者可以對感興趣的內(nèi)容再單獨(dú)放大畔师。但是反復(fù)縮小、放大怔鳖、點(diǎn)錯(cuò)位置終究不是友好的做法茉唉。
預(yù)算充足的情況下，我們可以單獨(dú)開發(fā)“手機(jī)版”網(wǎng)站结执，可以在其中增強(qiáng)一些功能度陆，譬如根據(jù)當(dāng)前GPS來挖掘出有價(jià)值數(shù)據(jù)。多數(shù)時(shí)候献幔，根據(jù)視口大小來匹配不同的視覺效果還是優(yōu)先選擇懂傀。
響應(yīng)式設(shè)計(jì)的概念最早提出是指將彈性網(wǎng)格布局、彈性圖片蜡感、媒體和媒體查詢結(jié)合起來的網(wǎng)頁開發(fā)技巧的結(jié)合蹬蚁。和以往的做法不同，我們推薦首先對小屏幕進(jìn)行設(shè)計(jì)郑兴，然后逐漸增強(qiáng)針對大屏幕的設(shè)計(jì)和內(nèi)容犀斋。
全方位的測試響應(yīng)式網(wǎng)站，只需要改變?yōu)g覽器窗口大小就能完成大多數(shù)測試情连。當(dāng)然你可以下載瀏覽器的插件來做到這些叽粹，比如Chrome上可以用WindowResizer插件。
一些響應(yīng)式開發(fā)的站點(diǎn)
http://blog.teamtreehouse.com/
http://2011.dconstruct.org/
使用HTML5和CSS3能使前端的效果實(shí)現(xiàn)變得簡單很多却舀，但是也面臨著瀏覽器不支持的問題虫几。我們可以用一些現(xiàn)代化的工具（庫）來修補(bǔ)它們。
重申一點(diǎn)挽拔，預(yù)算允許條件下完全定制的移動(dòng)Web開發(fā)比響應(yīng)式網(wǎng)站開發(fā)更合適辆脸，但預(yù)算有限的前提下響應(yīng)式Web設(shè)計(jì)較之標(biāo)準(zhǔn)的固定寬度設(shè)計(jì)，總是能夠提供更好的用戶體驗(yàn)螃诅。
第2章 媒體查詢：支持不同的視口
關(guān)于媒體查詢
開始使用媒體查詢吧啡氢，它已經(jīng)被如此廣泛地使用和被瀏覽器所支持。
有了媒體查詢术裸，我們就能對設(shè)備特性（如視口寬度）設(shè)置特定的CSS樣式空执。
媒體查詢的語法（可以拷貝如下代碼到任意CSS的文件后面，然后預(yù)覽相關(guān)網(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>標(biāo)簽的media屬性來為樣式表指定的設(shè)備類型（如顯示屏或者打印機(jī)）。
<link rel="stylesheet" type="text/css" media="screen" href="screen-styles.css">
媒體查詢則不僅是針對設(shè)備類型奶栖，還能根據(jù)設(shè)備的特性來應(yīng)用樣式匹表，如下例為檢測一塊縱向放置的顯示屏门坷。
<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" />
也可以將多個(gè)表達(dá)式組合在一起袍镀，如下為增加了視口寬度大于800的顯示屏默蚌。
<link rel="stylesheet" media="screen and (orientation: portrait) and (min-width: 800px)" href="800wide-portrait-screen.css" />
更進(jìn)一步還可以寫一個(gè)媒體查詢列表，相互之間用逗號(hào)隔開苇羡，任何一個(gè)條件滿足就加載文件绸吸。
<link rel="stylesheet" media="screen and (orientation: portrait) and (min-width: 800px), projection" href="800wide-portrait-screen.css" />
除了在<head></head>中鏈接CSS文件時(shí)候使用媒體查詢，我們也可以在CSS文件中使用媒體查詢设江。
@media screen and (max-device-width: 400px) { h1 { color: green } }
還可以在CSS中使用@import指令引入其他的樣式表锦茁，謹(jǐn)慎使用這種方式，因?yàn)樗鼤?huì)增加HTTP的請求從而導(dǎo)致網(wǎng)頁加載速度變慢叉存。
@import url("phone.css") screen and (max-width:360px);
媒體查詢能使用的特性
媒體查詢中最常用的兩個(gè)特性是視口寬度width和屏幕寬度device-width码俩，除此以外還有orientation、aspect-ratio等特性可以檢測到歼捏。這些特性幾乎都可以結(jié)合max和min結(jié)合來創(chuàng)建一個(gè)使用范圍稿存。如下phone.css只有在視口寬度在200到300之間才會(huì)被引入：
@import url("phone.css") screen and (min-width:200px) and (max-width:360px);
如何用媒體查詢來改造我們的設(shè)計(jì)
CSS名為層疊樣式表，意為后面的樣式會(huì)覆蓋前面的相同的樣式瞳秽，因此我們的做法是在前面設(shè)置通用的樣式瓣履，然后用媒體查詢來進(jìn)一步重寫相應(yīng)部分。
加載媒體查詢的最佳方法
瀏覽器雖然能忽略與自身不匹配的樣式文件练俐，但卻不一定不下載這些文件袖迎。因此，你將樣式文件拆分到不用的樣式文件沒有太大好處（個(gè)人喜好或者方便代碼組織的目的除外）痰洒，這會(huì)增加頁面請求HTTP的數(shù)量瓢棒。因此建議用如下的方式在已有的樣式表中追加媒體查詢樣式。
@media screen and (max-width: 768px) {/樣式/}
我們的第一個(gè)響應(yīng)式設(shè)計(jì)
不管如何開始動(dòng)手做一個(gè)響應(yīng)式設(shè)計(jì)的頁面吧丘喻。這個(gè)網(wǎng)站的主題是關(guān)于電影脯宿，該書作者的初衷是這樣的“我打算自己弄一個(gè)And the winner isn't的網(wǎng)站，褒獎(jiǎng)哪些本應(yīng)該獲獎(jiǎng)的電影泉粉，批評那些不應(yīng)該獲獎(jiǎng)的電影连霉。這里還能視頻剪輯、經(jīng)典語錄嗡靡、電影海報(bào)跺撼，以及證明我沒錯(cuò)的在線調(diào)查”。
-
從固定寬度設(shè)計(jì)開始
雖然理論上是從移動(dòng)（小屏幕）的體驗(yàn)出發(fā)開始設(shè)計(jì)讨彼，但現(xiàn)實(shí)中更多的還是將桌面版網(wǎng)頁設(shè)計(jì)改成響應(yīng)式的歉井。既然目前和將來相當(dāng)一段時(shí)間內(nèi)我們都是這么做，我們還是從固定寬度開始哈误。如下是一個(gè)固寬度的界面原型哩至，包含了頭部躏嚎、導(dǎo)航、邊欄菩貌、內(nèi)容區(qū)和頁腳卢佣。
1_outlook1_outlook
在此我們先測驗(yàn)一下HTML4標(biāo)簽來測驗(yàn)我們的媒體查詢技巧。如下為HTML4便攜的沒有實(shí)際內(nèi)容的基本頁面結(jié)構(gòu)箭阶。
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"> <div id="header"> <div id="navigation"> <ul> <li><a href="#">navigation1</a></li> <li><a href="#">navigation2</a></li> </ul> </div> </div> <div id="sidebar"> <p>here is the sidebar</p> </div> <div id="content"> <p>here is the content</p> </div> <div id="footer"> <p>Here is the footer</p> </div> </div></body></html>
然后我們?yōu)楦鱾€(gè)模塊加入了一些基本的樣式虚茶。
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;}
在一個(gè)視口大于960的瀏覽器中，頁面的瀏覽效果如下仇参。
2_rawOutlook
- 響應(yīng)式設(shè)計(jì)中圖片應(yīng)該盡可能保持精簡
為了更好的體現(xiàn)固定寬度的設(shè)計(jì)在視口大小變化時(shí)的存在的問題嘹叫，作者對網(wǎng)頁內(nèi)容進(jìn)行了美化。遺憾的是作者并沒有將它放置到Github上冈敛，得要我們自己到 andthewinnerisnt 上把網(wǎng)頁內(nèi)容保存待笑，然后將還未講解到的特性等刪除，以方便按順序來閱讀和增強(qiáng)代碼抓谴。這里可能需要稍微花費(fèi)一點(diǎn)時(shí)間暮蹂，因?yàn)楹芏鄬懛ǘ家呀?jīng)是優(yōu)化后的了。為了繼續(xù)前進(jìn)癌压，簡單整理后頁面效果如下（跟作者網(wǎng)站沒太大區(qū)別）：
3_beautifyOutlook3_beautifyOutlook
有兩點(diǎn)是需要了解的仰泻。
使用到的圖片應(yīng)該盡可能小。
不論是否是響應(yīng)式Web設(shè)計(jì)滩届，都應(yīng)該盡可能減少圖片的大小集侯，頭部和底部的小彩旗就是通過背景圖片的repeat-x來呈現(xiàn)的。
關(guān)于重置樣式帜消。
各種瀏覽器渲染HTML時(shí)會(huì)有各種默認(rèn)樣式棠枉，為了統(tǒng)一表現(xiàn)我們通常會(huì)導(dǎo)入重置樣式在主樣式文件的開頭。對于HTML5泡挺，normalize.css就是不錯(cuò)的選擇辈讶。
你可以網(wǎng)頁窗口拉伸到小于960像素，會(huì)看到內(nèi)容被截?cái)嗔寺γāＭ瑯幽憧梢栽谑謾C(jī)上訪問贱除，想像一下網(wǎng)頁內(nèi)容在手機(jī)上會(huì)被截?cái)喑墒裁礃樱ㄩ_發(fā)過程中你可以起個(gè)server讓后通過手機(jī)訪問頁面; 但是如前面章節(jié)提到的，可以簡單地用Chrome的插件（個(gè)人因?yàn)樵诠舅械腃hrome插件都被禁用了媳溺，所以干脆使用Chrome自帶的模擬器來模擬月幌，但是這個(gè)模擬器并不好用，頁面上進(jìn)行了分辨率設(shè)置以后要反復(fù)toggle幾次emulate mobile選項(xiàng)才生效悬蔽。嗯扯躺，如果有條件不嫌麻煩就整個(gè)真正的移動(dòng)設(shè)備模擬器吧）。如下圖，在Chrome的進(jìn)行如下設(shè)置录语。
4_emulationSet1
你會(huì)發(fā)現(xiàn)獲取得到的效果居然還不錯(cuò)轴术，那是因?yàn)闉g覽器默認(rèn)在一定分辨率下渲染頁面，然后將網(wǎng)頁內(nèi)容縮小到了與視口大小匹配钦无。下一節(jié)會(huì)介紹如何阻止瀏覽器自動(dòng)調(diào)整頁面大小。
5_mobileEffect
- 阻止移動(dòng)瀏覽器自動(dòng)調(diào)整大小
IOS和Android的瀏覽器都是基于WebKit核心盖袭，這兩種瀏覽器以及其他很多瀏覽器都支持用viewport meta來覆蓋默認(rèn)的畫布縮放設(shè)置失暂。
下面是一個(gè)將畫布大小放大到實(shí)際尺寸兩倍的示例：
<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同時(shí)告訴瀏覽器寬度應(yīng)該等于設(shè)備寬度。maximum-scale和minimum-scale還可以用來控制頁面的可縮放范圍拙已。
6_scale
你甚至可以禁止用戶縮放决记，不過因?yàn)榭s放是一個(gè)很重要的輔助功能，在實(shí)踐中很少使用倍踪。
meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
下面是我們最終使用的meta標(biāo)簽系宫。
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
關(guān)于initial-scale要特別說明下，width=device-width設(shè)置以后瀏覽器的寬度跟媒體視口一致建车，經(jīng)過了initial-scale=1.0的設(shè)定以后扩借，呈現(xiàn)的內(nèi)容大小就是設(shè)定的原始內(nèi)容大小，而不要瀏覽器替你收縮（這是我們進(jìn)行包含了移動(dòng)端響應(yīng)式設(shè)計(jì)的前置條件）缤至。
拋出另一個(gè)問題潮罪，在模擬器中當(dāng)我們設(shè)置initial-scale2.0的時(shí)候，inspect element內(nèi)容區(qū)域比如#header大小仍舊是960px领斥，為什么不是960*2嫉到。只需要假定我們使用了一個(gè)類放大鏡的之類的東西導(dǎo)致看到的內(nèi)容變大了。
-
針對不同的視口寬度修正設(shè)計(jì)
我們首先為豎屏的iPad3/4增加媒體查詢月洛，同樣因?yàn)镃hrome模擬器不支持豎屏設(shè)置何恶，我們就手動(dòng)設(shè)置好了。如下為模擬器設(shè)置和沒有進(jìn)行媒體查詢的效果膊存。
7_scaleAdjust7_scaleAdjust
然后我們可以增加媒體查詢和樣式設(shè)置导而，可以看看效果。
@media screen and (max-width: 768px) { #wrapper { width: 768px; } #header, #footer, #navigation { width: 748px; }}
8_scaleAdjust2
顯示還是有一些問題隔崎，我們可以繼續(xù)優(yōu)化今艺，如下應(yīng)用以后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; } }
響應(yīng)式設(shè)計(jì)中內(nèi)容始終優(yōu)先
一個(gè)設(shè)計(jì)原則是爵卒，盡可能在多平臺(tái)多視口下保留盡可能多的內(nèi)容虚缎，而不是使用display:none等類似的方法來隱藏部分內(nèi)容。同時(shí)你要意識(shí)到內(nèi)容順序的重要性，目前頁面中側(cè)邊欄和主內(nèi)容區(qū)的順序決定了側(cè)邊欄會(huì)顯示在主內(nèi)容區(qū)前面实牡，在窄視口設(shè)備下陌僵，用戶先看到主內(nèi)容再看到側(cè)邊欄顯然更加合理。因此我們將#content和#siderbar進(jìn)行互換创坞。雖然標(biāo)簽換了位置碗短，但頁面在大視口下沒有變化，但是在iPad上變成了首先顯示主內(nèi)容區(qū)题涨，下面才是側(cè)邊欄偎谁。
在調(diào)整好標(biā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; }}媒體查詢只是響應(yīng)式開發(fā)的必要條件之一
盡管我們針對iPad上做了媒體查詢和樣式設(shè)置，網(wǎng)站在低分辨率上的iPhone的視口上顯示的仍舊很糟糕席函。我們雖然使用媒體查詢對視口寬度小于768像素應(yīng)用了樣式铐望，但是介于768到960像素之間的設(shè)備，則沒有對應(yīng)的媒體查詢代碼茂附，內(nèi)容因此會(huì)被剪切掉正蛙。
目前的情形是，我們針對特定的斷點(diǎn)設(shè)置了媒體查詢?nèi)缓笫共季职l(fā)生變化何之，但是捕捉到下一個(gè)視口斷點(diǎn)之前跟畅，頁面靜止不變。我們需要更好的策略溶推，能夠在斷點(diǎn)導(dǎo)致的效果突變之前保持伸縮徊件。如何做到這點(diǎn)，正是下一章的內(nèi)容：將呆板的固定布局修改成靈活的流動(dòng)布局蒜危。
第3章 擁抱流式布局為什么固定布局經(jīng)不起考驗(yàn)
我們使用固定布局虱痕，當(dāng)不同的視口出現(xiàn)的時(shí)候，你可以單獨(dú)增加媒體檢測辐赞，但未來會(huì)有更多大小不一的視口出現(xiàn)部翘。為什么響應(yīng)式布局需要百分比設(shè)計(jì)
使用百分比布局創(chuàng)建流動(dòng)的彈性界面，同時(shí)使用媒體查詢來限制元素的變動(dòng)訪問响委，將這兩者組合一起構(gòu)成了響應(yīng)式設(shè)計(jì)的核心新思，基于此可以真正創(chuàng)造出真正完美的設(shè)計(jì)。將網(wǎng)頁從固定布局修改為百分比布局
在可預(yù)見的未來赘风，我們的網(wǎng)頁制作都是基于設(shè)計(jì)圖的度量元素的大小夹囚、外邊距來寫CSS代碼。我們該如何將固定尺寸轉(zhuǎn)換為相對尺寸呢邀窃？
3.1 需要牢記的公式
目標(biāo)元素寬度 / 上下文元素寬度 = 百分比寬度
3.2 設(shè)置百分比元素的上下文
在我們的例子中荸哟，#wrapper是內(nèi)容區(qū)、側(cè)邊欄、頁腳設(shè)定寬度的上下文鞍历，我們需要給他們設(shè)定百分比值舵抹。當(dāng)然你也可以給#wrapper設(shè)定一個(gè)百分比，對于#wrapper而言劣砍，百分比是相對于視口尺寸而言的惧蛹。
我們先來看看頭部，#header（目標(biāo)元素）寬度為940像素刑枝，#wrapper（上下文元素）寬度為940像素赊淑。按照計(jì)算公司得到的結(jié)果是0.979166667，設(shè)置到CSS中是：
width: 97.9166667%; /* 940 ÷ 960 */
同樣的設(shè)置可以被應(yīng)用到#navigation和#footer中仅讽。
再來看#content和#sidebar，比如我自己改寫的例子中#content的寬度為666像素钾挟，#siderbar為220個(gè)像素洁灵，計(jì)算得到百分比分別為：666/960100=69.375%和（220-2)/960100%=22.708333333333332%（2像素為border-right的值）。
接下來繼續(xù)使用掺出，將頁面各處10像素的內(nèi)邊距徽千、外邊距也替換為等價(jià)的百分比，所有這些間距都是基于960像素的上下文汤锨，替換成對應(yīng)的百分比就是：1.0416667%(10/960)双抽。
3.3 必須時(shí)刻牢記上下文
一個(gè)需要注意的問題是百分比設(shè)置的上下文，在該書的例子中的導(dǎo)航欄中有ul>li>a的結(jié)構(gòu)闲礼，我們給a設(shè)定了margin-right:25px來控制導(dǎo)航元素之間的間距牍汹。但是使用上述的公式將固定限速設(shè)置為百分比后發(fā)現(xiàn)并不起作用。因沒有為li設(shè)定寬度柬泽，子節(jié)點(diǎn)a找不到上下文的寬度慎菲。對此解決辦法有很多，其中一種是直接將margi-right屬性設(shè)置到li上來锨并，以為內(nèi)ul是有設(shè)置寬度的露该。
3.4 用em換成px
最初設(shè)計(jì)師們使用em是因?yàn)樵诶习姹镜腎nternet Explorer無法縮放像素單位的文字。但現(xiàn)代瀏覽器早就支持了第煮，那么用em替代px還有什么優(yōu)越性呢解幼。有兩點(diǎn)理由：
（1）那:wq些使用Internet Explorer的用戶也能夠縮放文字
（2）這樣做使設(shè)計(jì)師們的工作變得更加簡單
em的實(shí)際大小是相對于上下文字體大小而言的，如果我們給body標(biāo)簽設(shè)置的文字大小是100%包警，給其他的文字都使用相對單位em撵摆，那么這些字體都會(huì)受到body上的初始聲明的影響。這樣做的好處是揽趾，如果完成了所有文字排版以后客戶提出希望把字體整體調(diào)大一些台汇，那么我們只需要修改body的文字大小其他所有文字都會(huì)相應(yīng)變化苟呐。
同樣，目標(biāo)元素尺寸 / 上下文元素尺寸 = 百分比尺寸
這個(gè)公式也適用于將文字的像素單位轉(zhuǎn)換為相對單位⊙铣模現(xiàn)代瀏覽器的默認(rèn)字體大小都是16像素(作者疏漏了還是過時(shí)了明明是14好么)笆呆，因此一開始給body標(biāo)簽應(yīng)用如下任何一條規(guī)則都是一樣的效果：
font-size: 16px;font-size: 100%;font-size: 1em;
舉一個(gè)例子，我們?yōu)闉榫W(wǎng)站標(biāo)題設(shè)置了如下樣式：
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; }
因?yàn)?8/16=3,我們可以對字體大小進(jìn)行改動(dòng)：
font-size: 3em; /* 48 ÷ 16 = 3*/
如果應(yīng)用這個(gè)規(guī)則除了毛病俄精，通常是目標(biāo)元素的上下文發(fā)生了變化榕堰，以頁面中的標(biāo)簽為例：
<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)代瀏覽器下要實(shí)現(xiàn)圖片隨著流動(dòng)布局相應(yīng)縮放大小只需要在CSS中做如下聲明：
img { max-width: 100%;}
也可以把這個(gè)技術(shù)應(yīng)用到其他多媒體標(biāo)簽上：
img,object,video,embed { max-width: 100%;}
但我們也面臨著一個(gè)問題，不論多大的視口都要下載同一張圖片（當(dāng)然是一張為了兼容大視口的大圖片）未免有些浪費(fèi)寬帶魏蔗。
讓圖片隨視口縮放
將奧斯卡圖像的固定寬高刪掉砍的，并設(shè)置一個(gè)百分比，然后可以拉伸頁面試一把效果莺治。
.oscarMain { float: left; margin-top: -28px; width: 28.9398281%; /* 202 ÷ 698 */}
給彈性圖片設(shè)置閾值
當(dāng)我們把窗口超過一定分辨率時(shí)廓鞠，圖片也被拉拉大了，我們可以追加一個(gè)特定樣式來為圖片設(shè)定閾值谣旁。
.oscarMain { float: left; margin-top: -28px; width: 28.9398281%; /* 698 ÷ 202 */ max-width: 202px;}
超級(jí)全能的max-width屬性
另一種限制頁面無限擴(kuò)展的方法是給最外層的#wrapper增加max-width屬性（有使用過Bootstrap的應(yīng)該不會(huì)陌生）诫惭，如下所示：
wrapper { margin-right: auto; margin-left: auto; width: 96%; /* Holding outermost DIV */ max-width: 1414px;}
這意味著也頁面會(huì)縮放至視的96%，但絕不會(huì)超過1414像素寬蔓挖。
3.6 為不同的屏幕尺寸提供不同的圖片
跟目前工作關(guān)聯(lián)不大夕土，暫且跳過。
作者推薦了Matt Wilco的做法瘟判，大致思路是由服務(wù)器端去生成各種尺寸的圖片怨绣，并且根據(jù)客戶端發(fā)送過來的關(guān)于resolution大小的信息來決定返回什么尺寸的圖片。
3.7 流動(dòng)布局和媒體查詢的默契配合
本章前面拷获，我們的導(dǎo)航鏈接在特定的視口寬度下會(huì)折成兩行篮撑，我們可以使用媒體查詢來修正這個(gè)問題。
@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; }}
媒體查詢約束流動(dòng)布局的變動(dòng)范圍匆瓜，而流動(dòng)布局則簡化了從一組媒體查詢樣式過渡到另一組的過渡過程赢笨。
3.8 CSS網(wǎng)格系統(tǒng)
該章節(jié)介紹了比較流行的幾種網(wǎng)格系統(tǒng)未蝌，并用其中一種實(shí)現(xiàn)了我們之前所繪的頁面。因?yàn)殚喿x這本書的時(shí)候茧妒，Bootstrap已經(jīng)大行其道并前端開發(fā)者所熟知了桐筏，就不贅述該書的示例了狰腌。但是有一點(diǎn)要注意琼腔，Bootstrap這樣的網(wǎng)格系統(tǒng)為我們提供了通過比如cols-md-等樣式提供了寬度、字體大小等的預(yù)設(shè)剖毯，但在要求嚴(yán)格按照設(shè)計(jì)實(shí)現(xiàn)界面的情況下，我們還是要自己來設(shè)置它們胶滋。
第4章 響應(yīng)式設(shè)計(jì)中的HTML5
本章概覽式地介紹了一些HTML5相關(guān)知識(shí)究恤，更多偏向概念和引導(dǎo)性，操作性不強(qiáng)理张。
大多數(shù)網(wǎng)站可以采用HTML5來編寫雾叭。
polyfill腳本：通常指的是一段能給老版本瀏覽帶來新特性的JavaScript代碼暂幼。
Modernizr是一個(gè)很常用的相對polyfill更加增強(qiáng)了的腳本庫旺嬉。
時(shí)間緊迫可以考慮使用HTML5樣板文件*。里面包含了基本樣式normalize.css悲酷、polyfill和一些必要的工具如Modernizr设易。
前端開發(fā)工具基本都包含了迅速生成基本文件的功能，這里只稍微對比一下兩個(gè)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的標(biāo)簽是可以簡略地書寫的者冤，并且一些不符合XHTML1.0的寫法也不會(huì)有任何問題涉枫，但我們還是推薦盡可能標(biāo)準(zhǔn)的方式來書寫HTML代碼愿汰，并且盡可能找到一個(gè)平衡：類似于<link>的type屬性可以省略摇予，但標(biāo)簽要記得閉合并且給屬性加上引號(hào)侧戴。
有一些標(biāo)簽在HTML5中被廢棄了酗宋，你也許很多都沒有用到過，但是記住要盡可能采用CSS的方式來實(shí)現(xiàn)效果哎迄，而不是之前的在標(biāo)簽上加屬性的方式翔烁。
HTML5增加了一些全新的語義化元素蹬屹，為什么語義化很重要，因?yàn)樵谝郧暗淖龇ㄖ形覀兺ㄟ^給div家id和class能夠讓其他人在閱讀代碼的時(shí)候很好地理解代碼衬鱼，但是對機(jī)器而言就不那么簡單了。HTMl5旨在用全新的語義化標(biāo)簽來解決這個(gè)問題抛蚤。如下是一些語義化標(biāo)簽的列表（不打算詳細(xì)記錄岁经，那樣也沒有意義）：
section
nav
article
aside
hgroup
header
footer
address
HTML5的很多容器都有自己獨(dú)立的大綱結(jié)構(gòu)樊拓，這意味著你不用總是去想現(xiàn)在是幾級(jí)標(biāo)題筋夏，不同父級(jí)容器會(huì)給不同的標(biāo)題相應(yīng)的大小樣式，你只需要在容器中任意使用就好蛤织。
有一些網(wǎng)頁工具可以用來測試生成的網(wǎng)頁的大綱結(jié)構(gòu)（個(gè)人認(rèn)為對于排版不佳稚瘾、長久未讀的代碼還是有些幫助的）摊欠。
可以嘗試著把之前自己構(gòu)建的網(wǎng)頁的元素替換成header些椒、nav、footer石窑，然后修改對應(yīng)的css中的選擇器松逊。
HTMl5中的文本語義級(jí)元素如b, em, i以前會(huì)是用來添加文本樣式的并且不推薦為了做樣式而使用它們，但是現(xiàn)在通常有了新的語義可以自己查詢看烁兰，不贅述沪斟。
遵循WAI-ARIA是指無障礙網(wǎng)頁應(yīng)用技術(shù)轨域，來讓殘障人士能夠訪問網(wǎng)頁中的動(dòng)態(tài)內(nèi)容干发，實(shí)現(xiàn)這些技術(shù)包含的內(nèi)容有很多枉长，這里只簡單提一下會(huì)用到的一些，比如地標(biāo)角色landmark role（也就是在很多頁面中看到的role="navigation/application/banner/form"等）可以讓屏幕閱讀器在不同的頁面區(qū)塊之間輕松跳轉(zhuǎn)吼蚁。
Apple公司拒絕在IOS設(shè)備上支持Flash的時(shí)候極大的促進(jìn)了HTMl5的發(fā)展肝匆。
使用HTML5方法為頁面添加視頻或者音頻
因?yàn)樵缙馂g覽器內(nèi)置視頻格式的爭議，目前很多瀏覽器支持的不同的格式的視頻或音頻能曾，為了解決這個(gè)問題我們可能會(huì)為這個(gè)視頻或音頻創(chuàng)建多個(gè)版本，并都嵌套在video標(biāo)簽中驼唱。
為了給IE8以及更低版本的瀏覽器提供備用方案曙蒸，你可能還需要追加一個(gè)Flash甚至媒體文件的下載鏈接兼吓。
audio和video的標(biāo)簽用法基本一致视搏。
響應(yīng)式視頻
給視頻設(shè)置固定寬高佑力，當(dāng)頁面被拉伸的時(shí)候，似乎就不怎么響應(yīng)式了编饺，你可以就本書的例子或者W3C上找一個(gè)例子試一試。通過給視頻設(shè)置max-width: 100%的方法能夠解決這個(gè)問題（本書前面章節(jié)針對圖片有提到過這個(gè)解決方案）。
離線Web應(yīng)用
對于一些應(yīng)用需要在離線狀態(tài)下能夠正常使用养距。比如一個(gè)筆記應(yīng)用，當(dāng)用戶的手機(jī)網(wǎng)絡(luò)斷開時(shí)耘纱，可能正在編輯一篇筆記，通過使用Web離線功能他就能夠繼續(xù)編輯筆記毕荐，等到網(wǎng)絡(luò)連接上的時(shí)候再把內(nèi)容同步到網(wǎng)絡(luò)上束析。
HTML5離線應(yīng)用的運(yùn)行機(jī)制是：為每個(gè)需要離線使用的網(wǎng)頁都制定一個(gè).mainfest文件，這個(gè)文件羅列了該網(wǎng)頁離線使用時(shí)所需要的的所有資源文件憎亚。支持離線Web應(yīng)用的瀏覽器會(huì)自動(dòng)讀取.mainfest文件员寇，下載所羅列的資源列表并緩存至本地以備網(wǎng)絡(luò)斷開時(shí)使用。
第6章 用CSS3創(chuàng)造令人驚艷的美
一點(diǎn)小感受：總覺得自發(fā)的細(xì)致閱讀一本書是很沒有動(dòng)力來源和成效的事情第美，因?yàn)闆]有應(yīng)用到具體項(xiàng)目中蝶锋，你不會(huì)想深究。目前所看的這些章節(jié)除了前三章外即時(shí)如此，其實(shí)只需要有個(gè)概念在腦袋中，真的用到的時(shí)候有搜索引擎在手然后就行了挠乳。急切想翻閱完畢要開始看Linux相關(guān)的書籍了~ 以下為第6章簡略筆記：
使用CSS3可以替代圖片減少http請求卖怜。
需要添加瀏覽器私有前綴來保證最大的瀏覽器兼容性，或者使用一些JavaScript揖赴，它會(huì)自動(dòng)為CSS3追加瀏覽器私有前綴。
6.1 文字陰影
text-shadow: 1px 1px #cccccc;
參數(shù)分別表示右側(cè)陰影大小淡喜，下側(cè)陰影大小易桃，模糊距離）造寝。
顏色可以使用hex姊舵、hsl仰税、rgb顏色唉窃。
大小可以使用px笋额、em掏导、rem。
還可以用逗號(hào)分隔的方式使用多重文字陰影。
6.2 盒陰影
盒陰影的語法和文字陰影完全一樣处铛。
可以將text-shadow后的第一個(gè)參數(shù)指定為inset來設(shè)置內(nèi)陰影。
同樣可以設(shè)置多重陰影狈网。
6.3 背景漸變
線性背景漸變，方法為設(shè)定起點(diǎn)、過渡點(diǎn)置吓、終點(diǎn)的顏色方案呛凶。
徑向背景漸變，可以設(shè)置發(fā)散形式的漸變亮航，可選擇的類型（圓昼蛀、橢圓等）很多延欠，能做出很酷炫的效果硬鞍。
重復(fù)漸變著淆。
6.4 背景漸變圖案
有一些家伙用CSS的背景技術(shù)制作了一些圖案能夠在背景中漸變，沒有美工或者帶寬有限減少用大圖的時(shí)候拴疤，或許是個(gè)選擇永部。
6.5 CSS3的響應(yīng)性
針對上述學(xué)習(xí)的特性，務(wù)必記得針對不同的視口做不同的聲明呐矾。
為了瀏覽器兼容性苔埋，書寫CSS3需要私有前綴，還有一種快速編寫CSS3的方法蜒犯，就是使用CSS預(yù)處理器组橄，比如最流行的SASS和LESS（聞名已久未曾用過）。
6.6 組合使用CSS3屬性
略（結(jié)合該書開篇的案例來操作一把上面的新屬性）罚随。
6.7 多重背景圖片
在CSS3中我們可以使用多重背景玉工，各自有個(gè)子的大小和位置，相互之間用逗號(hào)隔開就行淘菩。
6.8 更多CSS特性
上面是介紹的只是CSS3的一小部分但屬于最常用的遵班。
6.9 可縮放圖標(biāo)：響應(yīng)式設(shè)計(jì)中的完美選擇
@font-face圖標(biāo)就是將字符做成圖標(biāo)的特定字體，以往我們的需要使用很多的圖標(biāo)圖片潮改，或者組合成一張很大的圖狭郑，現(xiàn)在只需要用一種字體就涵蓋所有需要的圖標(biāo)。比較流行的比如font-awesome就是這樣的原理（哦汇在，原來如此~）翰萨。
第7章 CSS3過渡、變形和動(dòng)畫
7.1 什么是CSS3過渡以及如何使用它
一個(gè)超鏈接默認(rèn)設(shè)置了一個(gè)樣式糕殉，當(dāng)鼠標(biāo)hover上去的時(shí)候可能會(huì)應(yīng)用到另外一個(gè)樣式缨历，這就是一個(gè)過渡以蕴。過渡可以針對屬性來過渡，比如當(dāng)hover發(fā)生時(shí)候過渡辛孵。
過渡涉及四個(gè)屬性：transition-property 要過渡的屬性名稱丛肮，比如background-color或all
transition-duration 定義過渡效果持續(xù)的時(shí)間
transition-timing-function 定義過渡期間速度如何變化
transition-delay 可選，定義過渡開始前的延遲事件
單獨(dú)使用各種過渡屬性創(chuàng)建效果的語法如下：
content a { transition-property: all; transition-duration: 1s; transition-timing-function: ease; transition-delay: 0s; }
簡寫語法如下
transition: all 1s ease 0s;
也可以在不同的時(shí)間段內(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變形實(shí)現(xiàn)更廣泛，它允許我們使用如下變形：scale：用來縮放大小
translate：在屏幕內(nèi)移動(dòng)元素
rotate：按照一定的角度旋轉(zhuǎn)元素
skew：按照X和Y軸對元素進(jìn)行斜切
matrix：將上述若干變形效果組合成單個(gè)聲明冶匹，并允許你用像素精度來控制變形效果
實(shí)際項(xiàng)目中可以使用傻瓜矩陣變形工具來完成這樣的事情习劫。
transform-origin可以用來修改變形效果的起點(diǎn)。
7.3 嘗試CSS3的3D形變
CSS3的3D形變能創(chuàng)造非辰腊酷的效果诽里，但相對2D的瀏覽器支持性要差一些。
7.4 CSS3動(dòng)畫效果
如下是一個(gè)給h5加上陰影動(dòng)畫的例子飞蛹，最開始定義一個(gè)關(guān)鍵幀的名字谤狡，以及在動(dòng)畫進(jìn)行到多少的時(shí)候的效果，然后在元素h5應(yīng)用卧檐。當(dāng)然如果想要在特定瀏覽器上執(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;}
動(dòng)畫可以采用的參數(shù)有七個(gè)可以獨(dú)立設(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過渡讓效果的初始按照可定義的速度進(jìn)行，形變使使得元素大小盈罐、偏移等值脫離初始榜跌，動(dòng)畫則定義了一個(gè)變化的過程，三者結(jié)合起來能產(chǎn)生非常豐富的效果盅粪。 該書示例有結(jié)合示例進(jìn)行演示钓葫，在此跳過，有興趣可以自己參考~
7.5 本章小結(jié)
本章學(xué)習(xí)了CSS3過渡湾揽、形變和動(dòng)畫的內(nèi)容瓤逼，學(xué)習(xí)這些新特性的最終目的是使用CSS3來替代JavaScript制作一些優(yōu)雅降級(jí)的增強(qiáng)效果，從而使代碼更簡潔和豐富库物。下一章將開始學(xué)習(xí)表單中HTML5和CSS3的應(yīng)用霸旗。
第8章 用HTML5和CSS3征服表單
8.1 HTML5表單
HTML5表單不僅包含了一些新的視覺元素，還具備了基本的客戶端驗(yàn)證的功能戚揭，而過去這些一般都需要依賴JavaScript诱告。如下列舉了這些新的表單特性：
8.1.1 一個(gè)示例表單構(gòu)建
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <form id="redemption" method="post"> <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>
因?yàn)闀械睦悠鋵?shí)并沒有提供連貫的例子，如下只貼出一些片段用于粘貼在上面的表單示例中方便查看效果民晒。
8.1.2 placeholder
占位符是HTML5表單中非常頻繁被使用的一個(gè)屬性精居，輸入框獲取焦點(diǎn)后會(huì)自動(dòng)消失锄禽。
8.1.3 required
為確保表單必須輸入值，可以添加required屬性靴姿，當(dāng)輸入不符合條件時(shí)候?yàn)g覽器會(huì)給出提示沃但，并且表單默認(rèn)不會(huì)提交。注：aria-required是為了方便屏幕閱讀器用戶佛吓，第四章有介紹過WAI-ARIA宵晚。
8.1.4 autofocus
autofocus可以讓表單加載完成時(shí)就有一個(gè)表單域被默認(rèn)自動(dòng)聚焦。
<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
很多瀏覽器提供了自動(dòng)完成功能來幫助用戶完成輸入维雇，但是通常會(huì)關(guān)閉這個(gè)功能淤刃，因?yàn)樗粌H能保護(hù)敏感數(shù)據(jù)（例如銀行卡賬戶），還可以讓用戶用心填寫表單而不是隨便輸入一個(gè)值（使用者可能通過自動(dòng)完成來選擇曾填寫過的假的電話號(hào)碼）吱型。
下面的代碼是一個(gè)禁止自動(dòng)完成的表單項(xiàng)：
<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>
也可以給表單本身設(shè)置屬性來禁止整個(gè)表單的自動(dòng)完成功能：
<form id="redemption" method="post" autocomplete="off">
autofus可以讓表單加載完成時(shí)就有一個(gè)表單被默認(rèn)自動(dòng)聚焦逸贾。
8.1.6 list及對應(yīng)的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屬性的輸入框看起來就是一個(gè)普通的文本輸入框，list屬性的值就是datalist元素的id津滞，開始輸入時(shí)會(huì)顯示一個(gè)數(shù)據(jù)選擇框铝侵。注：使用select包裹option是為了便于老版本瀏覽器的降級(jí)。
8.1.7 HTML5的新輸入類型
郵箱地址 <input type="email" />
數(shù)字 <input type="number"/>
URL地址 <input type="url"/>
電話號(hào)碼 < input type="tel"/>
搜索輸入框 <inputtype="search"/>
和普通文本框表現(xiàn)一樣只是個(gè)別瀏覽器渲染上有細(xì)微差別
正則表達(dá)式 <input pattern="([a-zA-Z])"/>
顏色選擇器 <input type="color"
目前很少瀏覽器支持該特性（@13年）
滑動(dòng)條 <input type="range" min="1" max = "10" />
8.1.8 日期和時(shí)間輸入類型
如下多種的日期時(shí)間輸入類型提供了不同的度量單位据沈，輸出結(jié)果值會(huì)略有不同：
date
month
week
time
datetime和datetime-local
8.2 如何給不支持新特性的瀏覽器打補(bǔ)丁
盡管說了很多HTML5表單的新特新哟沫，但實(shí)際使用的時(shí)候 （1）支持表單新特性的瀏覽器在具體實(shí)現(xiàn)上有所不同（2）對完全不不支持新特的瀏覽器如何處理饺蔑。
第四章提過一個(gè)Modernizr的JavaScript框用于向缺少HTML5/CSS3特性支持的瀏覽器打補(bǔ)丁锌介，Webshims Lib就是構(gòu)建于Modernizr和jQuery之上的。
它利用了Modernizr的加載功能猾警，只加載實(shí)際所需要的補(bǔ)丁孔祸。
通過打補(bǔ)丁不僅使老版本的瀏覽器受益，很多新的劉瀏覽器也沒有完全實(shí)現(xiàn)HTML5的表單特性发皿，網(wǎng)頁中引入Webshims Lib可以修補(bǔ)這些瀏覽器的缺陷崔慧。
Webshims Lib的使用很簡單：
下載Webshims Lib包，解壓
從包解壓出來的文件夾中導(dǎo)入依賴的jQuery穴墅、Modernizr惶室、polyfiller文件
執(zhí)行javascript: $.webshims.polyfill()
來初始化腳本用于加載所需的補(bǔ)丁
8.3 使用CSS3美化HTML5表單
作者使用第七章介紹的CSS3知識(shí)，用類似圓角玄货、陰影等屬性稍微潤色了下表單皇钞，此處略過。除了之前學(xué)習(xí)的CSS3屬性外松捉，CSS3還專門提供了一些針對表單的偽類選擇器：
input:required
input:focus:invalid
input:focus:valid
可以通過這些偽類來書寫一些樣式規(guī)則夹界，從而增強(qiáng)表單的用戶體驗(yàn)。
8.4 小結(jié)
本章學(xué)習(xí)了如何使用一堆新的HTML5表單屬性隘世，從而讓表單更加好用可柿。并且我們介紹了如何使用工具來進(jìn)行JavaScript對象檢測有條件地加載JavaScript補(bǔ)丁腳本鸠踪，從而保證這些在新舊瀏覽器上都能提供類似的用戶體驗(yàn)。
