rem适配是比百分比要精准许多，只需要三行js代码，废话不多说，我们直接上源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>smiledemo</title>
<style>
.test{
width: 20rem;
height: 10rem;
background-color: bisque;
text-align: center;
}
.hello{
color: red;
font-size: 1rem;
}
</style>
</head>
<body>
<div id="app"></div>
<div class="test">
<p class="hello">Hello Maybe</p>
</div>
<script>
//获取屏幕宽度
let htmlwidth = document.documentElement.clientWidth || document.body.clientWidth;
//获取最外层的Dom
let htmlDom = document.getElementsByTagName('html')[0];
//设置Dom的字体大小
htmlDom.style.fontSize=htmlwidth/20 +'px';
console.log(htmlwidth)
</script>
</body>
</html>
网友评论