网页端类小程序转换0.01rem=1rpx

2019-05-29  本文已影响0人  长安猎人
<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即可原样输出

上一篇 下一篇

猜你喜欢

热点阅读