一般所熟知的css樣式大小單位有px，em。

px：精確地描述元素大小，不隨屏幕大小的變化而變化；

em：相對於父元素的大小，如果有層層嵌套的話會導致這個值非常大或者非常小。

在寫移動端頁面的時候為了使頁面能夠適應多種尺寸的移動設備大小，通常會用rem來表示各個元素的大小。

rem：font size of the root element，即相對於根元素字體的大小。

因此，在開發頁面之前，需要給根元素的字體指定一個值。

一般情況下，瀏覽器默認的根元素字體的大小是16px，因此為了方便計算，可以將根元素字體大小可以設置為

html{
     font-size:62.5%;
     /*16 * 62.5% = 10;根元素字體大小是10px
 
*/
　　　/* */

}
h1{
　　font-size:1.2rem;/*h1字體的大小是12px*/
}

然後通過媒體查詢針對不同的屏幕大小設置font-size的百分比，就可以實現前端頁面適配了。

還有一種方法是將根元素font-size的大小設置成屏幕寬度的一定比，這樣通過不同屏幕打開時1rem的值自然也就不一樣了。

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了。

移動端自適應rem的設置