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

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

作者: 长安猎人 | 来源:发表于2019-05-29 23:15 被阅读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即可原样输出

    相关文章

      网友评论

          本文标题:网页端类小程序转换0.01rem=1rpx

          本文链接:https://www.haomeiwen.com/subject/zkkptctx.html