首先我們先介紹一下rem

em是css中的一個計量單位，就好比猴子是上單的一個計量單位一樣 即 em: em-quads。
那么，rem的意思就不難猜了，r代表的是 root 即 rem：root em => root em-quads。
我們都知道，em是個單位它參照的是父元素的字體，那么rem的大小就是以根元素的字體作為參照。
所以，我們在用rem的時候就必須知道根元素是什么，它的字體大小是多少，還有如何設(shè)置根元素的字體，已達到我們根據(jù)設(shè)備尺寸的不同實現(xiàn)用rem作為計量單位完成我們所講的移動端的適配的。
而關(guān)于rem的適配方案各家的方法也不是很統(tǒng)一，只能說是各有千秋，而比較流行的就是手機淘寶的適配方案了，也就是我們總在講的lib-flexible的適配方案。關(guān)于rem的布局方案我推薦一篇文章會詳細講到lib-flexible布局方案《使用Flexible實現(xiàn)手淘H5頁面的終端適配》

在使用rem布局中到底會有哪些問題

• 在奇葩的dpr設(shè)備上表現(xiàn)效果不太好，比如 一些華為的高端機型 用rem布局會出現(xiàn)錯亂。
• 設(shè)置根字體大小的方式有兩種，一種是媒體查詢，優(yōu)點：不需要額外使用js去更改html的字體，缺點：不連續(xù)，或者說并能完全實現(xiàn)對所有設(shè)備的布局規(guī)范統(tǒng)一；
  另一種是js動態(tài)更改html字體，優(yōu)點：連續(xù)；缺點：不如直接寫媒體查詢的體驗好；
• 不支持css3 calc的需要大量密集的 @media hack；
• 使用iframe引用也會出現(xiàn)問題；
• 需要解決在ios上的1px邊框問題，但是這個在lib-flexible中已經(jīng)解決：（1px變2px， 又被 initial-scale=0.5 縮小了一半）；

關(guān)于viewport，即，視窗

• vw：是Viewport's width的簡寫,1vw等于window.innerWidth的1%
• vh：和vw類似，是Viewport's height的簡寫，1vh等于window.innerHeihgt的1%
• vmin：vmin的值是當前vw和vh中較小的值
• vmax：vmax的值是當前vw和vh中較大的值
  這里我又要推薦了另外的兩篇文章給大家了分別是大漠的《再聊移動端頁面的適配》和《如何在Vue項目中使用vw實現(xiàn)移動端適配》還有一篇是Ghan的《使用create-react-app腳手架搭建vw-layout解決方案》

總結(jié)

之所以會寫這篇文章，就是希望大家在使用上述某一種適配方案的時候，要大概了解其機制，兼容性，以及可能遇到的問題，做到心中有數(shù)。
以上。