今天有朋友问我rem布局时，当屏幕宽度不一样的时候如何设置html的font-size的值，所以我就写了一个js供大家参考，如果有更好想法的同学可以回复我哦。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
#box{
background: red;
}
#div1{
background: blue;width:10rem;height:4rem;
}
#div2{
background: yellow;width:10rem;height:4rem;
}
</style>
</head>
<body>
<div id="box">
<div id="div1"></div>
<div id="div2"></div>
</div>
<!-- 以上仅为展示别说我起名太low -->
<script type="text/javascript">
(function(doc,win){
var doc = doc.documentElement;
doc.addEventListener('DOMContentLoaded', Resize, false);
// 当DOM加载后执行
win.addEventListener('resize', Resize, false);
// 当屏幕发生变化时执行
function Resize(){
doc.style.fontSize=doc.clientWidth/68.3 +'px'; //屏幕宽度为1366时 html font-size=20px;
//68.3为1366/20计算得出的值，当编写浏览器发生变化时可用编写的浏览器宽度/20得出这个固定值;
}
})(document,window)
</script>
</body>
</html>
网友评论