首页 > 移动开发 > 详细

移动端rem匹配

时间：2018-04-22 12:56:06 阅读：196 评论：0 收藏：0 [点我收藏+]

标签：nts ons png tle 适配 alt 单位技术 bsp

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匹配

标签：nts ons png tle 适配 alt 单位技术 bsp

原文地址：https://www.cnblogs.com/wangyawei/p/8906068.html

踩

(0)

赞

(0)

举报

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

更多

友情链接

兰亭集智国之画百度统计站长统计阿里云 chrome插件新版天听网

关于我们 - 联系我们 - 留言反馈

© 2014 mamicode.com 版权所有联系我们:gaon5@hotmail.com

迷上了代码！