移动端rem匹配
Posted giser123
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了移动端rem匹配相关的知识，希望对你有一定的参考价值。
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匹配的主要内容，如果未能解决你的问题，请参考以下文章