本文介绍了一种使用JavaScript实现REM响应式布局的方法，并提供了一个简单的示例代码。该方法通过监听窗口加载和调整大小事件来动态改变HTML根元素的字体大小。
先贴上我的rem布局的一段js:
window.onload=function(){
setRemSize();
window.addEventListener("resize",setRemSize,false);
function setRemSize(){
var _clientWidth = document.documentElement.clientWidth/7.2+'px';
document.documentElement.style.fontSize = _clientWidth;
};
}
在页面的<body>之前加上这段代码，并且设置html的font-size:100px即可，这样1rem即为100px；当设计图上的大小为300px*100px时，rem高度应该是3rem*1rem;
这种布局非常简单，但是在APP上加载时会出现页面先放大后又缩小的情况，这时只要把上面那段代码的window.onload事件去掉就可以。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
