Rem & Viewport

Rem佈局

rem就是給根元素設置一個基準值 而後其餘元素都以這個基準值做爲單位 那麼就能夠在不一樣的手機上作出相同比例的元素了 事實上和百分比是一樣的道理

網易和淘寶的rem

參考
http://www.codeceo.com/article/font-size-web-design.html

網易新聞的作法

deviceWidth = 320，font-size = 320 / 6.4 = 50px
deviceWidth = 375，font-size = 375 / 6.4 = 58.59375px
deviceWidth = 414，font-size = 414 / 6.4 = 64.6875px
deviceWidth = 500，font-size = 500 / 6.4 = 78.125px

//deviceWith實際上就是clientWidth
document.documentElement.style.fontSize = document.documentElement.clientWidth / 6.4 + 'px';

對於width是320的屏幕 默認1rem是50px
爲何會是6.4這個值呢？ 網易郵箱的設計稿x軸是640寬度的
因此設計稿中210px 對應的就是2.1rem

淘寶的作法

var scale = 1 / devicePixelRatio;
document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');

淘寶的viewport是根據像素密度來的 雖然4S的viewport是320 可是4s的dpr是2 因此獲得的頁面寬度是640

淘寶佈局的第二個要點，就是html元素的font-size的計算公式，font-size = deviceWidth / 10 iphone6的橫軸爲750 那麼1rem = 75
故150px 就是2rem

本身實現最簡單的方式

參考
http://www.iinterest.net/2015/07/22/css3-rem-layout/

我這裏設置的fontsize是屏幕寬度的20分之1 也就是一個屏幕(不論viewport如何)該擺下20個大小爲1rem的字(漢字)

setRootFont();
function setRootFont(){

var clientWidth = document.documentElement.clientWidth;
var fontSize = (clientWidth / 20).toFixed(2);
document.documentElement.style.fontSize = fontSize + 'px';
}
//或者用 orientationchange 事件
window.addEventListener('resize', function(){
    setRootFont();
}, false);

注意別忘了用html,body{margin:0}去掉默認間隔

和viewport結合

(function(){
    var doc = window.document;
var docEl = doc.documentElement;
var metaEl = doc.querySelector('meta[name="viewport"]');
var flexibleEl = doc.querySelector('meta[name="flexible"]');
var dpr = 0;
var scale = 0;
var tid;

if (metaEl) {
    console.warn('將根據已有的meta標籤來設置縮放比例');
}else{
    scale = 1 / window.devicePixelRatio;
    metaEl = doc.createElement('meta');
    metaEl.setAttribute('name', 'viewport');
    metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
    if (docEl.firstElementChild) {
        docEl.firstElementChild.appendChild(metaEl);
    } else {
        var wrap = doc.createElement('div');
        wrap.appendChild(metaEl);
        doc.write(wrap.innerHTML);
    }
}
setRootFont();

})();

window.addEventListener('orientationchange', function() {
    setRootFont();
}, false);


function setRootFont() {
    var clientWidth = document.documentElement.clientWidth;
    var fontSize = (clientWidth / 20).toFixed(2);
    document.documentElement.style.fontSize = fontSize + 'px';
}