移动端的rem适配
程序员文章站
2022-04-15 16:21:09
小桥 流水 人家 ......
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{margin:0;padding:0;}
ul{
width:100%;
height:1rem;
background: red;
}
li{
width:1rem;
height:1rem;
font-size:0.2rem;
color:blue;
float:left;
}
</style>
</head>
<body>
<ul>
<li>小桥</li>
<li>流水</li>
<li>人家</li>
</ul>
</body>
<script type="text/javascript">
// 移动端适配
function rems(){
// 获取屏幕宽度(此处是一个兼容的写法)
var htmlwidth=document.documentelement.clientwidth||document.body.clientwidth;
// 设置根元素的fontsize的大小，此处的3.2是--设计图的宽度/100
document.documentelement.style.fontsize=htmlwidth/3.2+"px";
// 设置条件屏幕宽度最大值
if(htmlwidth>640){
htmlwidth=640;
document.documentelement.style.fontsize=htmlwidth/3.2+"px";
}
}
// 默认调用适配函数
rems();
// window大小变化时调用适配函数
window.onresize=function(){
rems()
}
</script>
</html>