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';

}