title: viewport ,media, rem
date: 2016-11-22
tags: 響應式布局
0x00 viewport
通俗的講，移動設備上的viewport就是設備的屏幕上能用來顯示我們的網頁的那一塊區域，但實際情況下并不總是這樣。
移動設備的屏幕尺寸比 PC 端的屏幕尺寸要小得多，所以，移動端的瀏覽器為了能讓那些在 PC 端開發的網站被正常的顯示，決定默認情況下把 viewport 設為一個較寬的值，我們暫且把這個瀏覽器默認的 viewport 叫做 layout viewport,這個 layout viewport 的寬度可以通過 document.documentElement.clientWidth 來獲取(iphone6的 layout viewport 值為 980 px)。
此外，還需要一個 viewport 來代表瀏覽器可視區域的大小，我們這個 viewport 稱為 **visual viewport,可以通過window.innerWidth` 來獲取它的寬度值.
最后，還有一個能夠完美適配移動端設備的 viewport 。所謂的完美適配指的是，首先不需要用戶縮放和橫向滾動條就能正常的查看網站的所有內容；第二，顯示的文字的大小是合適，比如一段14px大小的文字，不會因為在一個高密度像素的屏幕里顯示得太小而無法看清，理想的情況是這段14px的文字無論是在何種密度屏幕，何種分辨率下，顯示出來的大小都是差不多的。我們把這個 viewport 叫做 ideal viewport，即是 理想 viewport，ideal viewport 的寬度等于移動設備的屏幕寬度。
ideal viewport 并沒有一個固定的尺寸，不同的設備擁有有不同的 ideal viewport,目前，iphone6的 ideal viewport 寬度值是 375px。
0x01 meta 媒體查詢
我們可以通過 meta 標簽對移動設備的 viewport (移動設備默認的是 layout viewport)，進行控制。
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=2.0,minimum-scale=0.5,user-scalable=yes"/>
對 meta viewport content 中的屬性解釋如下:
-
width: 設置 layout viewport 的寬度，該值為一個正整數，當設置為字符串 width-device 時，意味著將瀏覽器的 viewport 設置為 ideal viewport。 -
initial-scale:設置頁面的初始縮放值 -
minimum-scale:用戶所能進行的最小縮放值 -
maximum-scale:用戶所能進行的最大縮放值 -
user-scalable:是否允許用戶進行縮放，值為 yes 或 no
這些屬性可以同時使用，也可以單獨使用或混合使用，多個屬性同時使用時用逗號隔開。
此外，縮放是相對于 ideal viewport 來縮放的，縮放值越大，當前viewport 的寬度就會越小，反之亦然。
CSS3 加入的媒體查詢使得無需修改內容便可以使樣式應用于某些特定的設備范圍。
在 link 元素中應用媒體查詢:
<link href="example.css" rel="stylesheet" media="(max-width:800px) and (min-width:375px) ">
max-width:當媒體可視區域的寬不大于該值時應用 example.css 樣式min-width: 當媒體可視區域的寬不小于該值時應用 example.css 樣式
在 CSS 樣式中使用媒體查詢:
<style type="text/css">
@media screen and (max-width: 800px) and (min-width: 375px){
/*style*/
*{
background: red;
}
}
</style>
這個查詢適用于寬度在 375px 和 800px之間的屏幕 screen 。與此類似的媒體類型 tv 代表電視, handheld 代表手持設備,print 代表打印機。
其中， and 屬于邏輯操作符合，此外，還有 not, only, or 等邏輯操作符， 并且 or 操作符和 逗號(,) 操作符的作用一樣。
比如，想在最小寬度為700像素或是橫屏的手持設備上應用一組樣式:
@media (min-width: 700px), handheld and (orientation: landscape) { ... }
// (orientation: portrait) 表示豎屏設備
媒體查詢要寫在 所有的 CSS 樣式的最后
0x02 rem
當在進行移動設備的布局時，我們將會經常使用的一個單位是 rem,而不再是 px
rem, em
rem 與 em 的參考對象都是 font-size 這個屬性的值，不過 em 的參考對象是父級的 font-size 值，而 rem 的參考對象是根元素 <html> 元素的 font-size 值。
1em = 父級 font-size 大小，1rem = 根元素 font-size 大小
如果html5要適應各種分辨率的移動設備，應該使用rem這樣的尺寸單位,下面是各個分辨率范圍在 html上 設置 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}}
