js原理就是 真实宽度/设计图宽度 = 真实字体号大小/设计图字号大小
所以 js应该是 获取当前页面的宽度为真实宽度
然后通过上面这个公式 把真实字体字号大小求出来
然后这个真实字号大小赋给html的字号 作为rem的计算比例
最后再根据这个计算比例 来设置所有容器的宽度
需要在JS里面 设置的 是设计图字号 和设计图的宽度
然后再计算出来真是的宽度
<script type="text/javascript">
(function() {
change();
function change() {
/* 这里的html字体大小利用了一个简单书序公式(十字相乘),当我们默认设置以屏幕320px位基准此时的字体大小为20px(320 20px),那么浏览器窗口大小改变的时候新的htm
* l的fontSize(clientWidth 新的值)就是clientWidth*20/320 */
document.documentElement.style.fontSize = document.documentElement.clientWidth * 20 / 320 + 'px';
console.log(document.documentElement.style.fontSize)
}
/* 监听窗口大小发生改变时 */
window.addEventListener('resize', change, false)
window.addEventListener('pageshow', change, false);
})();
</script>
<div id="">
我是10REM
</div>
<style type="text/css">
div {
background: red;
width: 10rem;
}
</style>