自適應佈局方案有百分比佈局、flex佈局、彈性flex佈局等，但是都有一些缺點。

• 百分比佈局缺點：字型大小需要另外一套自適應方法來調整；當螢幕寬度大於700px後，繼續按照百分比元素會偏大，這個時候調整起來會比較麻煩。

• flex佈局、彈性flex佈局：在移動端會出現一些支援的相容問題。

rem

W3C官網描述是“font size of the root element”，即rem是相對於根元素。
我們只需要在HTML根元素確定一個參考值，css中其他使用rem作為單位的值都基於這個值進行計算。

rem實現寬度自適應的原理

通過JS使頁面的fontsize會根據螢幕的寬度自動調整。
具體是根據螢幕寬度和所設字型大小的比值是固定的，獲取螢幕寬度後，按照固定比例縮小後作為rem的單位長度實現自適應。

另外值得說的是即使採用了rem佈局方案，頁面上不一定所有的元素都是採用rem作為單位。，比如下面淘寶的案例。底部固定的導航條採用的是高度使用固定的畫素值，寬度flex佈局的方案。

程式碼詳解

程式碼解釋：
如果頁面的寬度超過了640px，那麼頁面中html的font-size恆為100px，否則，頁面中html的font-size的大小為： 100 * (當前頁面寬度 / 640) 

為什麼是640px？

三個概念：螢幕解析度、裝置畫素、css畫素
螢幕解析度和裝置畫素是物理概念，而CSS畫素是WEB程式設計的概念；螢幕解析度和裝置畫素的差別在於裝置畫素顯示密度。
當裝置螢幕解析度=100%的時候，瀏覽器CSS畫素尺寸和裝置畫素相等，而當畫素密度(pixel density)為1的時候，螢幕解析度和裝置畫素相等。

對於手機螢幕來說，640px的頁面寬度是一個安全的最大寬度，保證了移動端頁面兩邊不會留白。注意這裡的px是css邏輯畫素，與裝置的物理畫素是有區別的。如iPhone 5使用的是Retina視網膜螢幕，使用2px x 2px的 device pixel 代表 1px x 1px 的 css pixel，所以裝置畫素數為640 x 1136px，而它的CSS邏輯畫素數為320 x 568px。

為什麼要設定html的font-size？

rem就是根元素（即：html）的字型大小。html中的所有標籤樣式凡是涉及到尺寸的（如： height,width,padding,margin,font-size。甚至，left,top等）你都可以放心大膽的用rem作單位。
如果你把html的font-size設為20px，前面說過，rem就是html的字型大小，那麼1rem = 20px。

瀏覽器一般都有最小字型限制，比如谷歌瀏覽器，最小中文字型就是12px，所以實際上沒有辦法讓1rem=1px

根據上面的js程式碼，如果頁面寬度低於640px,那麼頁面中html的font-size也會按照（當前頁面寬度/640）的比例變化。這樣，頁面中凡是應用了rem的作尺寸單位的元素都會隨著頁面變化而等比例縮放了。

怎麼計算出不同解析度下font-size的值？

假設頁面設計稿是按照640的標準尺寸設計的，（當然這個尺寸肯定不一定是640，可以是320，或者480，又或是375）來看一組表格。

以640的寬度去切的，怎麼計算不同寬度下font-site的值，大家看錶格上面的數值變化應該能明白。舉個例子：384/640 = 0.6，384是640的0.6倍，所以384頁面寬度下的font-size也等於它的0.6倍，這時384的font-size就等於12px。在不同裝置的寬度計算方式以此類推。

除了上面通過JS去動態計算根元素的font-size，也可採用媒體查詢。一般我們在做web app都會先統計自己網站有哪些主流的螢幕裝置，然後去針對那些裝置去做media query設定也可以實現適配，例如下面這樣：

使用媒體查詢的缺點是不能所有裝置全適配，但是用JS是可以實現全適配。具體使用上根據需求來定。