<html>
<style>
html {
font-size: calc(100vw / 7.5);
}
body {
margin: 0;
}
.div1 {
width: 7.5rem;
font-size: 0.32rem;
height: 1rem;
background-color: #fd5757;
font-weight: bold;
color: white;
text-align: center;
line-height: 1rem;
}
</style>
<body>
<div class="div1">div1 width = 7.5rem</div>
</body>
</html>
开发网页的时候,最烦的就是多端无法做到统一单位,通过以上代码可以有效解决该问题。
该示例可以动态设置html的font-size大小,故可得出:
屏幕宽度:7.5rem = 750 * 0.01rem
因而实现小程序端代码将rpx单位换位0.01rem即可原样输出
网友评论