@(HTML5)[相應式布局]
[TOC]
九诀黍、HTML5響應式布局
什么是響應式網(wǎng)頁設(shè)計（布局）
響應式網(wǎng)頁設(shè)計(Responsive Web design，通沉椋縮寫為RWD)是指：頁面的設(shè)計與開發(fā)應當根據(jù)用戶行為以及設(shè)備環(huán)境(系統(tǒng)平臺优幸、屏幕尺寸、屏幕定向等)進行相應的響應和調(diào)整褪猛⊥耍可以說是一種網(wǎng)頁設(shè)計的技術(shù)做法，該設(shè)計可使網(wǎng)站在多種瀏覽設(shè)備（從桌面電腦顯示器到移動電話或其他移動產(chǎn)品設(shè)備）上閱讀和導航伊滋，同時減少縮放碳却、平移和滾動。
響應式網(wǎng)頁設(shè)計就是一個網(wǎng)站能夠兼容多個終端——而不是為每個終端做一個特定的版本笑旺。
響應式布局的實現(xiàn)
1. Meta標簽定義
使用viewport meta標簽在手機上控制布局
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
隱藏狀態(tài)欄
<meta name="apple-mobile-web-app-status-bar-style" content="blank" />
iPhone會將看起來像是電話號碼的數(shù)字添加鏈接昼浦，需要關(guān)閉
<meta name="format-detection content="telephone=no" />
2.使用Media Queries適配對應樣式
常用于布局的CSS Media Queries
設(shè)備類型
- all 所有設(shè)備；
- screen 電腦顯示器筒主；
- int 打印用紙或打印預覽視圖关噪；
- ndheld 便攜設(shè)備鸟蟹；
- 電視機類型的設(shè)備；
- eech 語意和音頻盒成器使兔；
- aille 盲人用點字法觸覺回饋設(shè)備建钥；
- bossed 盲文打印機；
- ojection 各種投影設(shè)備火诸；
- tty 使用固定密度字母柵格的媒介锦针，比如電傳打字機和終端荠察。
設(shè)備特性
- width 瀏覽器寬度置蜀；
- height 瀏覽器高度；
- device-width 設(shè)備屏幕分辨率的寬度值悉盆；
- device-height 設(shè)備屏幕分辨率的高度值盯荤；
- orientation 瀏覽器窗口的方向縱向還是橫向，當窗口的高度值大于等于寬度時該特性值為portrait焕盟，否則為landscape秋秤；
- aspect-ratio 比例值，瀏覽器的縱橫比脚翘；
- device-aspect-ratio 比例值灼卢，屏幕的縱橫比。
實現(xiàn)響應式布局
通過媒體查詢
@media screen and (max-width:320px) { }
@media screen and (min-width:320px) and (max-width:640px) { }
樣式表也可以引入外部的
@import url("css/demo.css") screen and (min-width:320px) and (max-width:640px);
@media screen and (min-width:640px) { }
當然来农，工作中是使用的外部樣式表
<link rel="stylesheet" type="text/css" href="a.css" media="screen and (min-width: 1000px)">
<link rel="stylesheet" type="text/css" href="b.css" media="screen and (min-width: 600px) and (max-width: 1000px)">
<link rel="stylesheet" type="text/css" href="c.css" media="screen and (max-width: 600px)">
也許鞋真，你需要讓手機的屏幕橫著，比如你在玩王者榮耀
豎屏- 屏幕寬度小于高度
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
橫屏-屏幕寬度大于高度
<link rel="stylesheet" media="all and (orientation:landscape)" href="portrait.css">
響應式布局缺點和優(yōu)點
優(yōu)點：面對不同分辨率設(shè)備沃于，靈活性強涩咖，能夠快捷地解決設(shè)備顯示適應問題。
缺點：兼容各種設(shè)備時所需工作量大繁莹、效率低下檩互、代碼累贅，會隱藏無用的元素咨演，加載時間延長闸昨，其實這是一種折中性質(zhì)的設(shè)計解決方案，由于多方面元素影響而達不到最佳效果薄风，在一定程度上改變了網(wǎng)站原有的布局結(jié)構(gòu)零院，會出現(xiàn)用戶混淆的情況。
這里有一個很嚴重的缺點
由于PC端和移動終端訪問的是同一個網(wǎng)站村刨，PC端可以不計較流量限制告抄，但是移動端不可能不計較。
這里主要是針對于圖片的使用嵌牺，為適配不同終端機型的屏幕寬度和像素密度打洼，我們一般會使用如下方法設(shè)置圖片的CSS樣式：
<style>
img{
max-width:100%;
height:auto;
}
</style>
將圖片的最大寬度設(shè)置為100%龄糊，以確保圖像不會超出其父級元素的寬度，如果父級元素的寬度發(fā)生改變募疮，圖片的寬度也隨之改變炫惩，height：auto 可以確保圖片的寬度發(fā)生改變時，圖片的高度會依據(jù)自身的寬高比例進行縮放阿浓。
這樣當我們在移動設(shè)備上訪問響應式網(wǎng)頁里的圖片時他嚷，只是把圖片的分辨率做了縮放，下載的還是PC端的那張大圖芭毙，這樣不僅浪費流量筋蓖，而且浪費帶寬，而且會拖慢網(wǎng)頁的打開速度退敦，嚴重影響用戶的使用體驗粘咖。
解決方案：<picture>
如下栗子中針對不同屏幕寬度加載不同的圖片；當頁面寬度 在320px到640px之間時加載minpic.png侈百；當頁面寬度大于640px時加載middle.png
<picture>
<source media="(min-width: 320px) and (max-width: 640px)" srcset="img/minpic.png">
<source media="(min-width: 640px)" srcset="img/middle.png">
<img src="img/picture.png" alt="this is a picture">
</picture>
如下例子中添加了屏幕的方向作為條件瓮下；當屏幕方向為橫屏方向時加載_landscape.png結(jié)尾的圖片；當屏幕方向為豎屏方向時加載 _portrait.png結(jié)尾的圖片钝域；
<picture>
<source media="(min-width: 320px) and (max-width: 640px) and (orientation: landscape)" srcset="img/minpic_landscape.png">
<source media="(min-width: 320px) and (max-width: 640px) and (orientation: portrait)" srcset="img/minpic_portrait.png">
<source media="(min-width: 640px) and (orientation: landscape)" srcset="img/middlepic_landscape.png">
<source media="(min-width: 640px) and (orientation: portrait)" srcset="img/middlepic_portrait.png">
<img src="img/picture.png" alt="this is a picture">
</picture>