Rem是相对于根元素font-size大小的单位
记inphone5屏幕宽度是 320px font-size16px 1rem=16px
<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 wangyawei</p>
</div>
</body>
</html>
于是我们在js中写适配方案3行代码即可搞定
<script>
let htmlwidth=document.documentElement.clientWidth||document.body.clientWidth;
console.log(htmlwidth);
let htmlDom=document.getElementsByTagName("html")[0];
//以imphone5的屏幕作为适配 320/16=20
htmlDom.style.fontSize=htmlwidth/20+"px";
</script>
可以看出完美适配，font-size变为了18.75px
移动端rem匹配
原文：https://www.cnblogs.com/wangyawei/p/8906068.html
