前言；

做移動端的同學都知道，移動端的尺寸參差不齊，那麼如何才能實現各移動端情況下，都能很好地自適應尺寸大小呢？

那就是rem這個單位！我們可以利用js來控制1rem在不同的移動端尺寸情況下對應不同的px（px是絕對單位）。

實現方式:

有興趣的可以搜淘寶的flexible.js前端自適應解決實現方案，但是那個相對複雜一些，後期轉換rem也不方便。

那麼，我推薦利用如下方式來進行實現移動端的自適應（貌似算網易的解決方案）。

如何實現呢？很簡單。程式碼如下：（這段程式碼適合於現在移動端按照寬度750來進行設計，也就iphone6的寬度）

特別注意：

引入該js檔案（檔名，你自己取），要引入在css檔案之前。

(function () {
    var html = document.documentElement;
    var windowWidth = html.clientWidth;
    html.style.fontSize = windowWidth / 7.5 + 'px';
})();
//這段程式碼的目的是在你除錯的切換螢幕的時候，實現響應式。但是專案中無需下面這個程式碼也可以
window.onresize = function () {
    var html = document.documentElement;
    var windowWidth = html.clientWidth;
    html.style.fontSize 
 
= windowWidth / 7.5 + 'px';
}

如何使用：

如果我們的設計稿都是利用750*1334這個尺寸來設計，那麼我們利用設計稿的尺寸除以100，然後用rem做單位，就可以實現移動端的自適應！

後記：

rem的概念：rem 是html 的font-size大小，一般為 16px。

我們就是用js來動態改變html 的font-size大小，從而改變了1rem對應的px，也就實現了自適應的效果。