之前有些適配做法，是通過js動態計算viewport的縮放值（initial-scale）。
例如以螢幕320畫素為基準，設定1，那螢幕375畫素就是375/320=1.18以此類推。
但直接這樣強制頁面縮放過於粗暴，會導致頁面文字失真模糊。
px是相對固定單位，字型大小大小直接被定死，所以使用者無法根據自己設定的瀏覽器字型大小而縮放，em和rem雖然都是相對單位，但em是相對於它的父元素的font-size，頁面層級越深，em的換算就越複雜，而rem是直接相對於根元素，這就避開了很多層級關係。移動端新型瀏覽器對rem的相容很好，可以放心使用。
有時我們會看到有些使用rem的頁面裡會先給頁面根元素乙個樣式：
html
為什麼是62.5%？
大多數瀏覽器的預設字型大小是16px，因此1rem=16px，這樣不方便我們px和rem的換算，假設1rem=10px，那麼100px=10rem，25px=0.25rem。這樣就好換算很多，於是就有了上面的10/16。
如果是640的設計稿，需要除以2轉化為和iphone5螢幕等寬的320。所以設計稿px單位/2/10轉為rem。之後再**查詢設定每個螢幕大小的font-size百分比，頁面會根據上面設定的根font-size適配。
看到這裡是不是覺得一切很完美？然而，這裡面有兩個深坑：
(1).我看了網上很多關於rem的資料，基本都說瀏覽器的預設字型大小就是16px，然後直接定義font-size:62.5%。但是，rem屬於css3的屬性，有些瀏覽器的早期版本和一些國內瀏覽器的預設字型大小並不是16px，那麼上面的10/16換算就不成立，直接給html定義font-size: 62.5%不成立。
(2).chrome強制字型最小值為12px，低於12px按12px處理，那上面的1rem=10px就變成1rem=12px，出現偏差（下面給demo）。
解決方案：
將1rem=10px換為1rem=100px（或者其它容易換算的比例值）;
不要在pc端使用rem
那麼上面的頁面根元素樣式要改為：
html
再用總結得出的各解析度**查詢換算：
@media screen and (min-width:360px) and (max-width:374px) and (orientation:portrait)
}@media screen and (min-width:375px) and (max-width:383px) and (orientation:portrait)
}@media screen and (min-width:384px) and (max-width:399px) and (orientation:portrait)
}@media screen and (min-width:400px) and (max-width:413px) and (orientation:portrait)
}@media screen and (min-width:414px) and (max-width:431px) and (orientation:portrait)
}@media screen and (min-width:432px) and (max-width:479px) and (orientation:portrait)
}
然而，上面的625%**除了有相容性問題，也無法很好地根據不同設計稿精準適配，不是我們的最佳選擇。
網易和**分別有自己的一套適配方法，適配性也很完美。
基準值： 可以看到，無論頁面以哪種手機比例縮放，body的width都是7.5rem。很明顯，目前網易的手機端設計稿是基於iphone6，750（設計師給的設計稿是物理解析度，會是我們寫樣式的邏輯解析度的兩倍，如果給的設計稿是640，那麼是基於iphone5，320），且基準值是100px（750/7.5=100）。這個基準值很關鍵，後面的css換算，都和這個基準值有關。動態font-size： 我們看到圖1的font-size都有根據螢幕大小而動態改變，可以推算出公式：
螢幕寬度/設計稿rem寬度=頁面動態font-size值（如：375/7.5=50）
獲取到這個值，再賦給html元素的style：
document.documentelement.style.fontsize = document.documentelement.clientwidth / 7.5 + 『px『;
這樣就設定好了每個頁面的根fonts-size，因為rem單位是基於根font-size，因此只要確定一種設計稿對應手機的換算，其餘螢幕尺寸均可自動適配。
上面我們得出設計稿換算rem的基準值是100，因此只需要把設計稿上的px值除以100即為我們要的rem值。
> px/100=rem，所以100px=1rem,25px=0.25rem
設定：頁面不要設定 。flexible會自動設定每個螢幕寬度的根font-size、動態viewport、針對retina屏做的dpr。
換算：假設拿到的設計稿和上述網易的一樣都是750，flexible會把設計稿分為10份，可以理解為頁面width=10rem，即1rem=75px，所以根font-size（基準值）=75px。
之後的css換算rem公式為：
px/75=rem,所以100px=100/75=1.33rem,50px=50/75=0.66rem
rem與px換算的計算方式
rem font size of the root element 是指相對於根元素的字型大小的單位。簡單的說它就是乙個相對單位。看到rem大家一定會想起em單位，em font size of the element 是指相對于父元素的字型大小的單位。它們之間其實很相似，只不過乙個計算的規則是依賴...
Vue Vant 純JS實現rem與px換算
不利用外掛程式，手寫js實現rem與px的換算。已知1rem等於根標籤的字型大小。如下 所示，假設640的設計稿，設定1rem等於10px。function win var rem width 64 為根標籤html設定font size，即1rem等於多少px docel.style.fontsi...
移動端px和rem的換算
看根元素html裡面設定的font size是多少 50 px，即認為1rem為多少 50 畫素 rem的優點是所有的元素大小都是乙個倍數，相對於根元素的倍數，所以只需要修改根元素，所有的元素都可以變化。可以適應不同的裝置解析度。缺點是ie6 ie7 ie8不支援這個標籤。指定了 1rem為50px...