通常所熟知的css樣式大小單位有px,em。css
px:精確地描述元素大小,不隨屏幕大小的變化而變化;html
em:相對於父元素的大小,若是有層層嵌套的話會致使這個值很是大或者很是小。前端
在寫移動端頁面的時候爲了使頁面可以適應多種尺寸的移動設備大小,一般會用rem來表示各個元素的大小。瀏覽器
rem:font size of the root element,即相對於根元素字體的大小。less
所以,在開發頁面以前,須要給根元素的字體指定一個值。函數
通常狀況下,瀏覽器默認的根元素字體的大小是16px,所以爲了方便計算,能夠將根元素字體大小能夠設置爲工具
html{ font-size:62.5%; /*16 * 62.5% = 10;根元素字體大小是10px*/
/* */
}
h1{
font-size:1.2rem;/*h1字體的大小是12px*/
}
而後經過媒體查詢針對不一樣的屏幕大小設置font-size的百分比,就能夠實現前端頁面適配了。字體
還有一種方法是將根元素font-size的大小設置成屏幕寬度的必定比,這樣經過不一樣屏幕打開時1rem的值天然也就不同了。spa
document.getElementsByTagName('html')[0].style.fontSize = window.screen.width /10 + 'px';
若是是iPhone5的尺寸,那麼根元素字體大小就是32px;設計
若是是IPhone6的尺寸,那麼根元素字體大小就是37.5px;
可是這樣咱們在設置各個元素大小的時候就很難換算了啊。不要緊,css編譯工具能夠解決這個問題。以less爲例:
設置一個函數,假設設計圖是iPhone的尺寸,設計圖上p的字體大小是12px,那麼p在不一樣屏幕的字體大小就是(12/37.5)rem。
.fs(@px){ font-size:unit(@px/37.5,rem); /*37.5是設計圖的尺寸對應的屏幕寬度除以10*/ }
p{
.fs(12);
}
其餘的寬度和高度也寫成函數的形式。
由於某些低版本瀏覽器不支持CSS3或者默認字體不是16px,所以在PC端就不要再使用rem了。