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