建議學(xué)習(xí)時長： 30分鐘
學(xué)習(xí)方式：深入
學(xué)習(xí)目標
- 知道 rem 計算值的方式根蟹。
- 知道如何用 rem 來做不同尺寸的屏幕的適配悯蝉。
詳細介紹
rem介紹
rem（font size of the root element）是指相對于根元素（即HTML元素）的字體大小的單位。
假設(shè)根元素的字體大小是10px, 則5rem的大小為 5*10=50px,例如
html{
font-size: 10px;
}
p{
width: 2rem; /* 2*10 = 20px;*/
margin: 1rem;
}
rem來做不同尺寸的屏幕的適配
以前我們往往這樣做頁面：viewport width 設(shè)置為 device-width，然后選我們需要兼容設(shè)備的最小寬度（一般是320px）茎芋。根據(jù)這最小寬度來做頁面把沼。單位使用px和百分比。在寬度不同的設(shè)備上秩伞，頁面的字體大小逞带，內(nèi)容尺寸都是一樣的欺矫，不同的是，大屏的內(nèi)容間的空隙比小屏的大展氓。所以這樣做的缺點就是穆趴，頁面在某些尺寸的設(shè)備上顯示的效果不好。
如果用rem來頁面遇汞，我們會根據(jù)不同的設(shè)備寬度在根元素上設(shè)置不同的字體大小毡代。寬度越寬，字體越大勺疼。然后對原本使用px的地方使用rem來替換教寂。這樣，字體大小执庐，內(nèi)容尺寸酪耕，對隨著屏幕寬度的變大而變大。
具體做法
1 根據(jù)不同的設(shè)備寬度在根元素上設(shè)置不同的字體大小轨淌。
為了能將設(shè)計稿中的 px 方便的轉(zhuǎn)換為頁面中 rem迂烁，我設(shè)置 1rem 為 寬度為 640px 的設(shè)計稿中的 100px。代碼如下
;
(function(win) {
var doc = win.document;
var docEl = doc.documentElement;
var tid;
function refreshRem() {
var width = docEl.getBoundingClientRect().width;
if (width > 540) { // 最大寬度
width = 540;
}
var rem = width / 6.4;
docEl.style.fontSize = rem + 'px';
}
win.addEventListener('resize', function() {
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}, false);
win.addEventListener('pageshow', function(e) {
if (e.persisted) {
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}
}, false);
refreshRem();
})(window);
還有一種方法會根據(jù) devicePixelRatio 設(shè)定 initial-scale 來放大 viewport递鹉，使頁面按照物理像素渲染盟步，提升清晰度。 代碼見這里
2 做頁面時
將設(shè)計稿的寬度縮放至 640px躏结。在上一步中却盘，1rem 為此時設(shè)計稿中 100px 的值。屏幕的寬度也就是 (640 / 100) = 6.4rem媳拴。
