手機端全部適配簡易步驟，不確保沒有bug。
1、HTML 的 head 部分中加入如下代碼：
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
其中 width：viewport 的寬度，可以指定為一個像素值，如：640，或者為特殊的值，如：device-width （設備的寬度）。
initial-scale：初始縮放比例，即當瀏覽器第一次加載頁面時的縮放比例。值為 1.0 即原始尺寸。
maximum-scale：允許瀏覽者縮放到的最大比例，一般設為1.0，即原始尺寸。
minimum-scale：允許瀏覽者縮放到的最小比例，一般設為1.0，即原始尺寸。
user-scalable：瀏覽者是否可以手動縮放，yes 或 no 。
2、HTML 中引入 一段自動適配所有窗口的 js 。
HTML 代碼如下 （ 假設你的 js 在 scripts 文件夾下，命名為 demo.js )：
<script src="scripts/demo.js"></script>
適配的 js 代碼如下 （將如下代碼復制粘貼到你的 demo.js 中）：
(function(doc, win){
var docE1 = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function(){
var clientWidth = docE1.clientWidth;
if(!clientWidth) return;
docE1.style.fontSize = 20 * (clientWidth / 320) + 'px';
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt,recalc,false);
doc.addEventListener('DOMContentLoaded',recalc,false);
})(document,window);
3、CSS 中 在最開始設置 html 的 font - size ：20px；（這個 size 標准由你定）代碼如下：
html {
font-size: 20px;
}
然后 假設你部門的設計師給你的 頁面 標准寬度為 640px，則頁面中所有的 寬高 全部除以 2 ，Chrome 瀏覽器 模擬手機頁面 設置手機型號為 IPhone 4 。這也就是為什么要將所有的寬高除以 2 的原因：IPhone 4 標准 寬 是320 px。 然后 正常的用 px 為單位 寫你的 css ，你所需要做的就是你寫的頁面，要在 IPhone 4 完全正確顯示。如果你說，那設計那邊給的不是 640 標准怎么辦？你只要讓你的頁面按照設計圖在 iphone 4 上正確顯示，就木問題。
4、頁面 css 全部寫完之后，將所有的 px 轉換為以 rem 為單位的數字。例如 我設置 body 的 width ：320px； 則根據 我在第三步設置的 font - size 值，轉換為 rem ，則是
width ：16 rem； 【320 / 20 (你設置的標准 font - size) = 16】。
如果你說一個頁面的 css 有幾百行，寫完再去改 太麻煩了，那可以用 px 轉換成 rem 的插件。我這里有一款推薦 ：cssrem（下載使用網址https://github.com/flashlizi/cssrem）
5、大功告成，隨意切換機型，盡情得瑟吧~