html设置根rem,经过js动态设置根元素的rem方案

rem目前是响应式开发移动端一个很重要也是经常使用的一个元素，可是在网上看的各类文章都会超级懵逼。因此我在下面给出两个方案，也列举出使用方法，让你们一目了然。前提是设计稿以750为准。其中测试的设计稿中标注此div的width:750px;height:200px;javascript

方案一：css

window.addEventListener(('orientationchange' in window ? 'orientationchange' : 'resize'), (function() {

function c() {

var d = document.documentElement;

var cw = d.clientWidth || 750;

d.style.fontSize = (20 * (cw / 375)) > 40 ? 40 + 'px' : (20 * (cw / 375)) + 'px';

}

c();

return c;

})(), false);

html{font-size:10px}

*{margin:0;}

设计稿中标注此div的width:750px;height:200px;

换算为rem,即为width:18.75rem,height:5rem;

此时 1rem = 40px;将设计稿标注的宽高除以40便可获得rem的值。html

此时在iPhone6上测试，width:375px，也即width:100%。

方案二：java

!(function(doc, win) {

var docEle = doc.documentElement, //获取html元素

event = "onorientationchange" in window ? "orientationchange" : "resize", //判断是屏幕旋转仍是resize;

fn = function() {

var width = docEle.clientWidth;

width && (docEle.style.fontSize = 10 * (width / 375) + "px"); //设置html的fontSize，随着event的改变而改变。

};

win.addEventListener(event, fn, false);

doc.addEventListener("DOMContentLoaded", fn, false);

}(document, window));

html {

font-size: 10px;

}

*{

margin: 0;

}

设计稿中标注此div的width:750px;height:200px;

换算为rem,即为width:37.5rem,height:10rem;

此时 1rem = 20px;将设计稿标注的宽高除以20便可获得rem的值。web

test

以上两种方案均为经过js动态设置html的根元素的font-size的值来达到响应式的效果。app

最后一个为手淘的方案：测试

test

本文为原创文章，转载请保留原出处，方便溯源，若有错误地方，谢谢指正。

原文连接：经过js动态设置根元素的rem方案flex