rem 適配佈局

山核桃發表於2018-10-29
REM

什麼是適配

當今手機種類繁多 且不說iphone系列，安卓手機的種類已經數不勝數了，所以不可能每一款手機都要寫一套佈局樣式，這也是不可能做到的，但是對於越來越精益求精的前端來說 ，當然要找到一個合理的解決方案。rem 就是用來自適應佈局的。

適配要達到的效果，如下圖（簡單的示範一下）

rem 適配佈局

兩個div不論在大屏還是小屏上都是佔據螢幕的一半

雖然上面這種簡單的使用百分比可以實現但是，百分比無法實現字型的自適應，百分比轉換成相應的尺寸還是很難的。接下來就說說這次我們的主角 rem （我們一般只適配寬度）

rem 原理解析

  首先rem是一個相對於根元素fontSize大小的相對單位，也就是說 1rem 等於 html 的 fontSize 大小， 接下來我們只需要改變html 元素的 fontSize 就可以控制 rem 的大小。接下來我們怎麼適配不同的螢幕呢，只要我們做到 螢幕寬度越大 1rem 表示的px值越大及HTML的fontSize值越大，也就是說 HTML的fontSize要於螢幕的寬度成正比。
  再說一下一些概念裝置畫素比、裝置物理畫素、裝置獨立畫素（有時也說是虛擬畫素）

裝置畫素比 = 裝置物理畫素 / 裝置獨立畫素
裝置物理畫素： 裝置上顯示的最小單位
裝置獨立畫素： 獨立於裝置的用於邏輯上衡量畫素的單位（css尺寸）。
複製程式碼

就拿iphone6/7/8 做說明iphone6/7/8的物理畫素是750，是裝置的實際尺寸，而px是是裝置獨立畫素單位，iphone6/7/8是2倍屏，它的css尺寸就是 375， 裝置畫素比是裝置出廠時已經設定好的。那麼我們怎麼實現適配？

這就用到最流行的rem了

rem的實現方案

首先、根據不同螢幕的裝置物理畫素，要跟html元素的fontSize設定不同的px大小

  • 1、媒體查詢
html{
		font-size:16px;
	}
@media screen and (min-width:240px) {
    html {
        font-size:9px;
    }
}
@media screen and (min-width:320px) {
	html {
		font-size:12px;
	}
}
@media screen and (min-width:375px) {
	html{
		font-size:14.0625px;
	}
}
複製程式碼

利用@media screen and (min-width:XXX)來判斷裝置的尺寸，進而設定html的fontSize

  • 2、js設定html的fontSize（網易方案）
function setRem () {
        let htmlRem = document.documentElement.clientWidth
        document.documentElement.style.fontSize = htmlRem/7.5 + 'px'
      }
setRem()
複製程式碼

以上程式碼是以iphone6為設計稿，結果是1rem=100px的實際畫素，因為iphone6的裝置畫素比是2所以1rem在瀏覽器的預覽中是50px，也就是實現了1rem和裝置寬度成7.5倍的關係，裝置寬度改變1rem的實際大小也會改變，而且在螢幕中的比例是沒有變的。（市面上大多數是這種方案）

  • 3、使用vw、vh
html{
    font-size: 10vw
}
複製程式碼

vw、vh是新的一種相對單位是把可視區域分的寬高為100份類似於百分比佈局，這種方案它不用去寫js，不過相容性有點差
下面附上vw、vh相容性的表

rem 適配佈局

每篇一省 rem是相對於根元素的fontSize，所以所有努力就是設定根元素的fontSize與裝置寬度成正比

相關文章