css3：rem單位

標籤：ie8   dia   nbsp   元素   bsp   相容   screen   .com   一個   

px：相對於顯示屏螢幕解析度而言

em：相對於父元素的字型尺寸

rem：相對於根節點（即html標籤）字型尺寸

瀏覽器預設字型大小：16px

html {font-size:62.5%;/*10 ÷ 16 × 100% = 62.5%   只是方便了計算，但chrome現在最小字型大小 12px 可以直接用px，設定font-size:20px;則1rem為20px*/}body {font-size:1.4rem;/*1.4 × 10px = 14px */}

相容性：

除了IE8及更早版本外，所有瀏覽器均已支援rem。對於不支援它的瀏覽器，會忽略rem設定的字型大小，此時可多寫一個絕對單位的聲明。故考慮相容性，一般使用px，或者px和rem兩者結合使用

為什麼很多web app上使用rem？

（1）沒有em多次計算的麻煩

（2）讓移動端字型和間距自適應

         a、移動端最多的用法就是，前置一段指令碼，計算當前裝置的尺寸，根據尺寸動態定義根項目的字型大小，這樣頁面定義的元素就可以自適應的改變

         b、媒體查詢方式

@media only screen { html { font-size: 30px; } }
@media only screen and (max-width: 479px) and (min-width: 321px) { html { font-size: 15px; } }
@media only screen and (max-width: 320px) { html { font-size: 13px; } }

 

css3：rem單位