現今手機種類繁多且不說iphone系列，安卓手機的種類已經數不勝數了，所以不可能每一款手機都要寫一套佈局樣式，這也是不可能做到的，但是對於越來越精益求精的前端來說，當然要找到一個合理的解決方案。 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是相對於根元素的fontSize，所以所有努力就是設定根元素的fontSize與設備寬度成正比
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。