移動端自適應佈局----rem字型
阿新 • • 發佈:2018-12-23
一.px,em,rem之間聯絡與區別
px:畫素是相對於顯示器螢幕解析度而言的相對長度單位,不會受螢幕寬度改變
em:繼承父級的font-size,與父級的字型大小有關rem:是em的升級版,rem只會相對html的值,不會受到父級的影響。
二.移動端怎麼用rem
假設設計師的視覺稿是按照iPhone6的寬度來設計的,即375px那麼,我們可以完全按照視覺稿上的尺寸來賦值給元素的樣式,比如視覺稿上的尺寸是80px,那麼在css中就可以直接定義width:80px; 頁面中所有的尺寸都這樣來設定。
當所有的網站所有的頁面樣式都設定好之後。
1. 設定頁面的rem大小
```css
html {
font-size: calc(100vw/3.75);
}
或者(ipone6舉例)
html{
font-size:26.67vw;
}
100vw是裝置的寬度,除以3.75可以讓1rem的大小在iPhone6下等於100px
2. 替換頁面中的單位,把所有的px單位替換成rem,除以100,比如前面的80px,就是0.8rem
這樣在iPhone6下,所有元素的尺寸還是和視覺稿的尺寸一樣,而iphone5中,因為裝置的寬度變小了,100vw/3.75得到的值,會相應的變小,即rem的單位值會變小,頁面中所有的尺寸會等比例縮放。
這樣就可以做到針對任何解析度的裝置保持視覺一致了。
最後,前面用到vw單位,但是低版本的裝置可能不支援,那麼就需要js來處理一下:
```javascript
document.documentElement.style.fontSize = window.innerWidth/3.75 + 'px'
```
當然,rem也可以用在定寬高等