以前我們往往這樣做頁面：viewport width 設定為 device-width，然後選我們需要相容裝置的最小寬度（一般是320px）。根據這最小寬度來做頁面。單位使用px和百分比。在寬度不同的裝置上，頁面的字型大小，內容尺寸都是一樣的，不同的是，大屏的內容間的空隙比小屏的大。所以這樣做的缺點就是，頁面在某些尺寸的裝置上顯示的效果不好。
如果用rem來頁面，我們會根據不同的裝置寬度在根元素上設定不同的字型大小。寬度越寬，字型越大。然後對原本使用px的地方使用rem來替換。這樣，字型大小，內容尺寸，對隨著螢幕寬度的變大而變大。
1 根據不同的裝置寬度在根元素上設定不同的字型大小。
為了能將設計稿中的 px 方便的轉換為頁面中 rem，我設定 1rem 為 寬度為 640px 的設計稿中的 100px。**如下
(function(win)
var rem = width / 6.4;
docel.style.fontsize = rem + 'px';
}win.addeventlistener('resize', function() , false);
win.addeventlistener('pageshow', function(e)
}, false);
refreshrem();
})(window)
備註：寫的時候最好利用script標籤把js寫到head中
使用 rem 做移動端適配
一 為什麼要使用rem 隨著手機的普及，以及手機可以方便攜帶的有優點，所以現在大多數時候，人們都會選擇用移動端檢視網頁。由於手機的螢幕大小不一，我們使用傳統的px單位已經無法滿足使用者檢視頁面的效果 舉個例子 我們有乙個200 x 200的盒子 如果使用px的話就會出現在不同裝置看到盒子的比例不是一...
移動端頁面適配，rem布局
移動端頁面適配 em 根據元素自身的字型大小來計算自己的尺寸 rem root em 根據根節點 html 的字型大小來計算自己的尺寸 適配 各個移動裝置，解析度大小不一致，使我們的頁面在各種解析度下都顯示完好 等比的縮放 根據螢幕的解析度 動態的設定html的字型大小，來達到頁面等比縮放的功能 注...
移動端rem適配
3 使用js 將設計圖劃分為10等份或者15等份。新建common.less檔案，這是乙個專門來適配的檔案。我們大概可以寫如下的檔案 設定常見的螢幕尺寸 修改裡面的html文字大小 a 一定要寫到最上面 html 我們此次定義的劃分的份數 為 15 no 15 320 media screen an...