當今手機種類繁多 且不說iphone系列，安卓手機的種類已經數不勝數了，所以不可能每一款手機都要寫一套布局樣式，這也是不可能做到的，但是對於越來越精益求精的前端來說 ，當然要找到乙個合理的解決方案。rem 就是用來自適應布局的。
適配要達到的效果，如下圖（簡單的示範一下）
兩個div不論在大屏還是小屏上都是佔據螢幕的一半
雖然上面這種簡單的使用百分比可以實現但是，百分比無法實現字型的自適應，百分比轉換成相應的尺寸還是很難的。接下來就說說這次我們的主角 rem（我們一般只適配寬度）
rem 原理解析
首先rem是乙個相對於根元素fontsize大小的相對單位，也就是說 1rem 等於 html 的 fontsize 大www.cppcns.com小， 接下來我們只需要改變html 元素的 fontsize 就可以控制 rem 的大小。接下來我們怎麼適配不同的螢幕呢，只要我們做到 螢幕寬度越大 1rem 表示的px值越大及html的fontsize值越大，也就是說 html的fontsize要於螢幕的寬度成正比。
再說一下一些概念裝置畫素比、裝置物理畫素、裝置獨立畫素（有時也說是虛擬畫素）
裝置畫素比 = vwzuohpbs裝置物理畫素 / 裝置獨立畫素
裝置物理畫素： 裝置上顯示的最小單位
裝置獨立畫素： 獨立於裝置的用於邏輯上衡量畫素的單位（css尺寸）。
就拿iphone6/7/8 做說明iphone6/7/8的物理畫素是750，是裝置的實際尺寸，而px是是裝置獨立畫素單位，iphone6/7/8是2倍屏，它的css尺寸就是 375， 裝置畫素vwzuohpbs比是裝置出廠時已經設定好的。 那麼我們怎麼實現適配？
這就用到最流行的rem了
rem的實現方案
首先、根據不同螢幕的裝置物理畫素，要跟html元素的fontsize設定不同的px大小
1、**查詢
html
@media screen and (min-width:240px)
}@media screen and (min-width:320px)
}@media screen and (min-width:375px)
}利用@media screen and (程式設計客棧min-width:***)來判斷裝置的尺寸，進而設定html的fontsize
2、js設定html的fontsize（網易方案）
function setrem ()
setrem()
以上**是以iphone6為設計稿，結果是1rem=100px的實際畫素，因為iphone6的裝置畫素比是2所以1rem在瀏覽器的預覽中是50px，也就是實現了1rem和裝置寬度成7.5倍的關係，裝置寬度改變1rem的實際大小也會改變，而且在螢幕中的比例是沒有變的。（市面上大多數是這種方案）
3、使用vw、vh
html
vw、vh是新的一種相對單位是把可視區域分的寬高為100份類似於百分比布局，這種方案它不用去寫js，不過相容性有點差
下面附上vw、vh相容性的表
每篇一省 rem是相對於根元素的fontsize，所以所有努力就是設定根元素的fontsize與裝置寬度成正比
本文標題: 詳解rem 適配布局
本文位址:
rem適配布局
rem適配布局 rem基礎 rem是乙個單位 rem root em 是乙個相對單位，類似於em，em是父元素字型大小 不同的是rem的基準是相對於html元素的字型大小 比如，根元素 html 設定font size 12px 非根元素設定width 2rem 則換成px表示就是24px rem的...
rem適配布局
rem root em 是乙個相對單位，類似em，em是相對于父元素的字型大小 不同的是rem的基準是相對於html元素的字型大小 rem的優勢 父元素文字大小可能不一致，但是整個頁面只有乙個html，可以很好來控制整個頁面的元 素大小 查詢 media query 是css3新語法 media m...
rem適配布局
思考？頁面布局文字能否隨著螢幕大小變化而變化？流式布局和flex布局主要針對與寬度布局，那高度如何設定？怎麼樣讓螢幕發生變化的時候元素高度和寬度等比例縮放？這時就需要用到rem適配布局。rem root em 是乙個相對單位，類似於em,em是相對于父元素的字型大小。而rem的基準是相對於html元...