移動端自適應rem的設定

標籤：div   通過   hone   問題   iphone6   1.2   設計圖   大小   pre   

一般所熟知的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的設定