title: viewport ,media, rem
date: 2016-11-22
tags: 響應(yīng)式布局
0x00 viewport
通俗的講萧落，移動(dòng)設(shè)備上的viewport就是設(shè)備的屏幕上能用來顯示我們的網(wǎng)頁的那一塊區(qū)域践美，但實(shí)際情況下并不總是這樣洗贰。
移動(dòng)設(shè)備的屏幕尺寸比 PC 端的屏幕尺寸要小得多，所以陨倡，移動(dòng)端的瀏覽器為了能讓那些在 PC 端開發(fā)的網(wǎng)站被正常的顯示敛滋，決定默認(rèn)情況下把 viewport 設(shè)為一個(gè)較寬的值，我們暫且把這個(gè)瀏覽器默認(rèn)的 viewport 叫做 layout viewport,這個(gè) layout viewport 的寬度可以通過 document.documentElement.clientWidth 來獲取(iphone6的 layout viewport 值為 980 px)兴革。
此外绎晃，還需要一個(gè) viewport 來代表瀏覽器可視區(qū)域的大小，我們這個(gè) viewport 稱為 **visual viewport,可以通過window.innerWidth` 來獲取它的寬度值.
最后杂曲，還有一個(gè)能夠完美適配移動(dòng)端設(shè)備的 viewport 庶艾。所謂的完美適配指的是，首先不需要用戶縮放和橫向滾動(dòng)條就能正常的查看網(wǎng)站的所有內(nèi)容擎勘；第二咱揍，顯示的文字的大小是合適，比如一段14px大小的文字棚饵，不會(huì)因?yàn)樵谝粋€(gè)高密度像素的屏幕里顯示得太小而無法看清煤裙，理想的情況是這段14px的文字無論是在何種密度屏幕，何種分辨率下噪漾，顯示出來的大小都是差不多的硼砰。我們把這個(gè) viewport 叫做 ideal viewport，即是 理想 viewport怪与，ideal viewport 的寬度等于移動(dòng)設(shè)備的屏幕寬度夺刑。
ideal viewport 并沒有一個(gè)固定的尺寸，不同的設(shè)備擁有有不同的 ideal viewport,目前分别，iphone6的 ideal viewport 寬度值是 375px。
0x01 meta 媒體查詢
我們可以通過 meta 標(biāo)簽對(duì)移動(dòng)設(shè)備的 viewport (移動(dòng)設(shè)備默認(rèn)的是 layout viewport)存淫，進(jìn)行控制耘斩。
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=2.0,minimum-scale=0.5,user-scalable=yes"/>
對(duì) meta viewport content 中的屬性解釋如下:
-
width: 設(shè)置 layout viewport 的寬度，該值為一個(gè)正整數(shù)桅咆，當(dāng)設(shè)置為字符串 width-device 時(shí)括授，意味著將瀏覽器的 viewport 設(shè)置為 ideal viewport。 -
initial-scale:設(shè)置頁面的初始縮放值 -
minimum-scale:用戶所能進(jìn)行的最小縮放值 -
maximum-scale:用戶所能進(jìn)行的最大縮放值 -
user-scalable:是否允許用戶進(jìn)行縮放岩饼，值為 yes 或 no
這些屬性可以同時(shí)使用荚虚，也可以單獨(dú)使用或混合使用，多個(gè)屬性同時(shí)使用時(shí)用逗號(hào)隔開籍茧。
此外版述，縮放是相對(duì)于 ideal viewport 來縮放的，縮放值越大寞冯，當(dāng)前viewport 的寬度就會(huì)越小渴析，反之亦然晚伙。
CSS3 加入的媒體查詢使得無需修改內(nèi)容便可以使樣式應(yīng)用于某些特定的設(shè)備范圍。
在 link 元素中應(yīng)用媒體查詢:
<link href="example.css" rel="stylesheet" media="(max-width:800px) and (min-width:375px) ">
max-width:當(dāng)媒體可視區(qū)域的寬不大于該值時(shí)應(yīng)用 example.css 樣式min-width: 當(dāng)媒體可視區(qū)域的寬不小于該值時(shí)應(yīng)用 example.css 樣式
在 CSS 樣式中使用媒體查詢:
<style type="text/css">
@media screen and (max-width: 800px) and (min-width: 375px){
/*style*/
*{
background: red;
}
}
</style>
這個(gè)查詢適用于寬度在 375px 和 800px之間的屏幕 screen 俭茧。與此類似的媒體類型 tv 代表電視, handheld 代表手持設(shè)備,print 代表打印機(jī)咆疗。
其中， and 屬于邏輯操作符合母债，此外午磁，還有 not, only, or 等邏輯操作符， 并且 or 操作符和 逗號(hào)(,) 操作符的作用一樣毡们。
比如漓踢，想在最小寬度為700像素或是橫屏的手持設(shè)備上應(yīng)用一組樣式:
@media (min-width: 700px), handheld and (orientation: landscape) { ... }
// (orientation: portrait) 表示豎屏設(shè)備
媒體查詢要寫在 所有的 CSS 樣式的最后
0x02 rem
當(dāng)在進(jìn)行移動(dòng)設(shè)備的布局時(shí)，我們將會(huì)經(jīng)常使用的一個(gè)單位是 rem,而不再是 px
rem, em
rem 與 em 的參考對(duì)象都是 font-size 這個(gè)屬性的值漏隐，不過 em 的參考對(duì)象是父級(jí)的 font-size 值喧半，而 rem 的參考對(duì)象是根元素 <html> 元素的 font-size 值鞠抑。
1em = 父級(jí) font-size 大小拒名，1rem = 根元素 font-size 大小
如果html5要適應(yīng)各種分辨率的移動(dòng)設(shè)備杉允，應(yīng)該使用rem這樣的尺寸單位,下面是各個(gè)分辨率范圍在 html上 設(shè)置 font-size 的代碼：
html{font-size:10px}
@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}
@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}
@media screen and (min-width:415px) and (max-width:639px){html{font-size:15px}}
@media screen and (min-width:640px) and (max-width:719px){html{font-size:20px}}
@media screen and (min-width:720px) and (max-width:749px){html{font-size:22.5px}}
@media screen and (min-width:750px) and (max-width:799px){html{font-size:23.5px}}
@media screen and (min-width:800px){html{font-size:25px}}
