您好,欢迎来到好土汽车网。
搜索
您的当前位置:首页详细说明rem布局(px和vw实现的区别)

详细说明rem布局(px和vw实现的区别)

来源:好土汽车网

什么是rem布局

简单来说,使用rem布局,在设置字体,宽高等大小时,是由html根元素的font-size决定的,并不一定是真实的font-size大小;

  • px实现rem布局;

例:当html的font-size为100px时,此时0.2rem == 20px;

<style>
    html {
        font-size: 100px;
    }
    .p1 {
        font-size: .2rem;
    }
    .p2 {
        font-size: 20px;
    }
</style>
<body>
    <p class="p1">我是rem布局</p>
    <p class="p2">我是rem布局</p>
</body>

html {
        font-size: 50px;
    }
    .p1 {
        font-size: .2rem;
    }
    .p2 {
        font-size: 10px;
    }

所以说,rem布局是由根元素的font-size决定的,设置html的font-size(px),可以实现一些需求,比如“大中小”字体的切换,只需改变html的font-size即可;但同时会存在一些问题:

<style>
    html {
        font-size: 100px;
    }
    .p1 {
        font-size: .2rem;
    }
</style>
<body>
    <p class="p1">我是rem布局我是rem布局我是rem布局</p>
</body>

上面的布局,在不同的手机屏幕尺寸下,有的一行可以展示,有的却会换行,这就有可能导致布局上出现问题;

  • vw实现rem布局

屏幕的宽度 = 100vw ;
vw的计算方式 100 / (UI图纸的宽度 / 100);

<style>
    /* 假设UI图宽668px vw = 100 / (668 / 100) ≈ 14.97  */
    html {
        font-size: 14.97vw;
    }
    .p1 {
        font-size: .2rem;
    }
    .p2 {
        font-size: 20px;
    }
</style>
<body>
    <p class="p1">我是rem布局</p>
    <p class="p2">我是rem布局</p>
</body>

<style>
    /* 假设UI图宽668px vw = 100 / (668 / 100) ≈ 14.97  */
    body {
        margin: 0;
        padding: 0;
    }
    html {
        font-size: 14.97vw;
    }
    .p1 {
        font-size: .2rem;
    }
    .p2 {
        font-size: 20px;
    }
</style>
<body>
    <p class="p1">一二三四五六七十一二三四五六七十一二三四五六七十一二</p>
    <p class="p2">一二三四五六七十一二三四五六七十一二三四五六七十一二</p>
</body>

在实际开发中,可根据实际需求,选择不同的实现方式;

因篇幅问题不能全部显示,请点此查看更多更全内容

Copyright © 2019- howto234.com 版权所有 湘ICP备2022005869号-3

违法及侵权请联系:TEL:199 1889 7713 E-MAIL:2724546146@qq.com

本站由北京市万商天勤律师事务所王兴未律师提供法律服务