談談css3的字體大小單位[rem]

最近接收了一份面試題，內容是移動端傳播的H5（在中國一般這麼叫）廣告頁。

秉承移動端web儘可能少用px的概念，我使用rem進行了一次重構。對於rem，基本是給 html/body 元素定義一個字體大小，來做爲整個頁面的參考值。在移動端能夠作到適配不一樣的手機分辨率，若是保持總體縮放，沒有設計上的差別能夠不須要用到`media query`。

在這份PSD中，設計師的視覺稿是按照640px寬度*900px高度來設計的，那麼咱們徹底能夠按照設計稿的尺寸設置瀏覽器尺寸，而後徹底按照視覺稿上的尺寸來賦值給元素樣式，好比視覺稿標尺顯示寬度是50PX，咱們能夠直接寫width:50px;頁面中全部尺寸都按照這樣來寫。

以後只須要設置root單位，即頁面的rem大小：

html {
font-size: calc(100vw/6.4);
}

其中100vw是設備的寬度，除以6.4可讓1rem的大小在640寬度的屏幕下等於100px（之因此讓1rem等於100px，而不是1rem等於1px，是由於在chrome下針對中文的最小字體是12px）。

以後替換頁面中的單位，把全部的px單位替換成rem，除以100，好比前面的50px，就是0.5rem這樣在640屏幕下，全部元素的尺寸仍是和視覺稿的尺寸同樣。

而在其餘尺寸的設備中，由於設備的寬度變小了，100vw/6.4獲得的值，會相應的變小，即rem的單位值會變小，頁面中全部的尺寸會等比例縮放。

這樣就能夠作到針對任何分辨率的設備保持視覺一致了。最後，前面用到vw單位，可是低版本的設備可能不支持，那麼咱們能夠用JS來處理：

javascriptdocument.documentElement.style.fontSize = window.innerWidth/6.4 + 'px'

或者使用：

@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; 
        } 
    }

昨晚實現完以後，發現了不少能夠改進的地方：

在如此多的絕對定位和相對定位下，使用less去計算css尺寸會輕鬆不少。

寫css的時候，能夠直接寫rem單位，按視覺稿除以100，其實也沒有什麼計算過程。

或者用預處理器的話，也能夠寫一個`px2rem`的函數。

不過這些都是後話了。