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>
rem适配
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 随着移动端的发展，rem的用途越来越广泛，很好的解决了px无法适配移动端的问题。因为rem是以根节点来计算的，在根...
- 今天先来分享一个小经验。 之前早读课都是固定时间用直播软件红点上课，最近红点频出故障，老师换了上课平台。我想把早上...
