談談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`的函數。

不過這些都是后話了。