rem布局原理

昨天去面试，面试官竟然说他们用媒体查询针对不同的屏幕宽度做了9个不同的rem布局，呵呵...

eg:

html{font-size:20px;}

div{width:16rem;height:100px;background:red;}

上面例子中div宽度为320，因为他是16乘以根元素的font-size的值。

每次设备屏幕宽度变化时，让根元素的font-size变化；

 

320屏宽时，font-size：20px, 16rem能占满屏

新设备宽度，为了16rem也能占满屏，所以要重新计算一下font-size.,

新屏幕宽度/16即可。

 

(function change(){

var font=document.documentElement.clientWidth/(320/20);

document.documentElement.style.width=font+'px';

}

window.addEventListener('resize',change,false);

change();

)();