響應(yīng)式一定是最佳的選擇嘛突颊？
如果預(yù)算充足且形式需要裆甩，做一個(gè)真正的“手機(jī)版”網(wǎng)站是首選冗锁。這樣就可以基于用戶(hù)的設(shè)備、位置嗤栓、連接速度冻河，以及包括技術(shù)特性在內(nèi)的其他變量來(lái)提供不同的內(nèi)容箍邮、設(shè)計(jì)和交互。
接手新項(xiàng)目時(shí)叨叙，不論響應(yīng)式是否合適锭弊，試著給用戶(hù)說(shuō)明以下幾點(diǎn)：
- 允許頁(yè)面顯示效果在老舊瀏覽器中有細(xì)微的差別，這樣可以使代碼更易維護(hù)擂错，將來(lái)更新的成本也更低味滞；
- 讓頁(yè)面元素在那些老舊的瀏覽器（如IE8及更低版本）中表現(xiàn)一致會(huì)導(dǎo)致網(wǎng)站增加大量的圖片。這會(huì)使網(wǎng)站變慢钮呀，制作成本變高剑鞍，而且更難維護(hù)。
- 現(xiàn)代瀏覽器可以理解的簡(jiǎn)潔代碼等同于更快速的網(wǎng)站爽醋∫鲜穑哭訴響應(yīng)的網(wǎng)站在搜索引擎中的評(píng)價(jià)高于慢騰騰的網(wǎng)站。
- 使用老舊瀏覽器的用戶(hù)越來(lái)越少蚂四，使用現(xiàn)代瀏覽器的用戶(hù)越來(lái)越多——我們應(yīng)該支持大多數(shù)!
- 最重要的一點(diǎn)形用，支持現(xiàn)代瀏覽器，你就能盡情地享受響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)证杭，它能響應(yīng)不同設(shè)備的不同瀏覽器視口。
HTML5部分：
html5文檔類(lèi)型聲明：
<!doctype html>
html5鏈入腳本文件：
<script src="js/test.js"></script>
html5鏈入樣式文件：
<link rel="stylesheet" src="css/test.css">
html5新增標(biāo)簽：
section：定義文檔或應(yīng)用程序中的區(qū)域妒御；
nav：定義文檔的主導(dǎo)航區(qū)域解愤；
article：用來(lái)包裹獨(dú)立的內(nèi)容片段；
aside：用來(lái)表示與頁(yè)面主內(nèi)容松散相關(guān)的內(nèi)容乎莉；
header：定義文檔的頭部區(qū)域送讲；
footer：定義文檔的底部區(qū)域；
address：定義文檔的聯(lián)系信息區(qū)域惋啃；
...
HTML5表單的新輸入類(lèi)型（語(yǔ)義化輸入類(lèi)型哼鬓，部分設(shè)備會(huì)為對(duì)應(yīng)的輸入類(lèi)型匹配合適的鍵盤(pán)模式）：
- email：郵件類(lèi)型輸入框——郵件類(lèi)型實(shí)例;
- number：數(shù)字類(lèi)型——數(shù)字類(lèi)型實(shí)例；
- url：URL地址類(lèi)型——地址實(shí)例;
- tel：電話(huà)輸入框——電話(huà)類(lèi)型實(shí)例边灭；
- search：搜索輸入框——搜索類(lèi)型實(shí)例;
- color：顏色輸入框——顏色類(lèi)型實(shí)例;
- date：日期輸入框——日期類(lèi)型實(shí)例;
- month：年月輸入框——年月類(lèi)型實(shí)例;
- week：周輸入框——周類(lèi)型實(shí)例;
- time：時(shí)間輸入框——時(shí)間類(lèi)型實(shí)例;
- datetime：日期時(shí)間選擇器——日期時(shí)間類(lèi)型實(shí)例;
- range：范圍選擇器——范圍選擇類(lèi)型實(shí)例;
表單元素中的屬性（）：
1.required：添加該屬性說(shuō)明該表單為必填項(xiàng)异希；
2.autofocus：表單域默認(rèn)聚焦；
3.autocomplete：自動(dòng)補(bǔ)全绒瘦，屬性值為off或on称簿；
4.list：顯示一組備選值——[list實(shí)例](http://jsbin.com/damapegibe/edit?html,output);
5.pattern：正則匹配屬性——[pattern實(shí)例](http://jsbin.com/topana/edit?html,output);
媒體查詢(xún)能檢測(cè)哪些特性：
- width：視口寬度；
- height：視口高度惰帽；
- device-width：渲染設(shè)備屏幕的寬度憨降；
- device-height：渲染設(shè)備屏幕的高度；
- orientation：檢查設(shè)備出于橫向還是豎向该酗；
...
響應(yīng)式中需要牢記的公式：
目標(biāo)元素寬度 / 上下文元素寬度 = 百分比寬度授药；
目標(biāo)元素行高 / 目標(biāo)元素高度 = 百分比行高士嚎；
HTML5中的video標(biāo)簽屬性：
- autoplay：資源加載完畢后自動(dòng)播放視頻；
- controls： 顯示標(biāo)準(zhǔn)的 HTML5 視頻/音頻播放器控制條悔叽、控制按鈕莱衩；
- loop：循環(huán)播放視頻；
- poster：存放與視頻相關(guān)的預(yù)覽圖骄蝇；
- preload：緩存視頻膳殷；
eg：
<video width="320" height="240" poster="img/test.jpg" controls preload="auto">
<source src="/i/movie.mp4" type="video/mp4">
<source src="/i/movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
-
響應(yīng)式視頻
刪除video標(biāo)簽中的width、height屬性九火，在css中追加如下代碼：
video {
max-width：100%赚窃；
height：auto；
}
CSS3部分：
使圖片自動(dòng)縮放至與其容器100%匹配：
img {
max-width：100%岔激；
}
nth規(guī)則：
li：nth-child（2n+3）——從右邊開(kāi)始（第三個(gè)元素開(kāi)始）分析勒极，每?jī)蓚€(gè)元素選擇一個(gè)；
CSS3中可使用的顏色屬性除了rgba外虑鼎，還可使用hsl(色相辱匿，飽和度，亮度)炫彩，hsla(色相匾七，飽和度，亮度江兢，透明度)昨忆。第一個(gè)h代表色相，60度時(shí)為黃色杉允，120度時(shí)為綠邑贴，180度時(shí)為青，240度時(shí)為藍(lán)叔磷，300度時(shí)為洋紅色拢驾，360度時(shí)為紅色：
hsla(60,90%,50%,.8); 此時(shí)為黃色
