這是mdn上的解釋：
這個單位代表根元素的 font-size 大小（例如 元素的font-size）。當用在根元素的font-size上面時 ，它代表了它的初始值也就是說，rem單位取值的大小和根元素
html的font-size取值直接相關。它跟html元素之間得關係為：html的fontsize值 * rem值 = px值。所以，我們可以根據不同的裝置寬度來調整html的font-size值，以適應不同的裝置。
(function(doc, win)
// 乘以100，px : rem = 100 : 1
docel.style.fontsize = 100 * (width / 750) + 'px';
};recalc()
if (!doc.addeventlistener) return;
win.addeventlistener(resizeevt, recalc, false);
})(document, window);
當你的頁面引入了以上**後，若設定乙個寬為200px，高為100px的元素時，只需將它轉成響應的以rem為單位的值：
#testvw即視口的寬度，即顯示網頁的區域大小。
1）設定meta標籤
設定html的font-size值為：
html由於1vw = 視口的1%，而視口寬度為750px（已假定設計稿為750），即750px = 100vw，所以1px = 0.13vw。
又因為px值/rem值=html的font-size值，所以設定html的font-size為13.33vw，相當於設定px:rem=100:1，便於計算。
3）使用
當你做了以上設定後，若設定乙個寬為200px，高為100px的元素時，只需將它轉成響應的以rem為單位的值：
#testvw的瀏覽器相容性越來越好，使用vw+rem來做移動端適配是挺不錯的乙個方案。
移動端適配方案
最簡單的移動端適配方案 rem vw 1vw等於螢幕寬度的1 1vh等於螢幕高度的1 通常設計稿為750寬度，螢幕總寬度為100vw 那麼 100vw 750px 1px 1px 100 750 1px就等於0.13333333vw 把單位放大100倍便於計算 html設計稿畫素單位轉換為rem單位...
移動端適配方案
先來看下目前iphone各個型號尺寸和解析度 我們所能看到的手機端瀏覽器的可視視窗大小 viewport分為三種 layout viewport 布局檢視 移動裝置瀏覽器認為自己必須能夠讓所有 都顯示 即便那些不是為移動瀏覽器設計的 所以設計了乙個大於螢幕尺寸的viewport 用來相容那些不是為移...
移動端適配方案
尺寸 超小屏 768以下 小屏 768 992 中屏 992 1200 寬屏 1200以上 適配方案 適配細節 在網頁 的頭部，加入一行viewport元標籤。viewport是網頁預設的寬度和高度，上面這行 的意思是，網頁寬度預設等於螢幕寬度 width device width 原始縮放比例 i...