px、em、rem、%、vw、vh、vm

开水没有冬天

于 2019-07-19 14:42:28 发布

阅读量173

点赞数

CC 4.0 BY-SA版权

分类专栏： css基础

本文链接：https://blog.csdn.net/weixin_42995876/article/details/96480400

css基础专栏收录该内容

18 篇文章

订阅专栏

本文通过实例对比了百分比单位%、视窗单位vw及相对单位em/rem在网页布局中的应用区别。重点讲解了这些单位如何随浏览器窗口大小变化而变化，以及在嵌套元素中它们是如何计算字体大小的。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

尽管%和vw在很多地方都很相似在使用的过程中还是要注意在出现竖向滚动条的时候vw=%+滚动条的宽度

em：

<body style="font-size: 14px;">

<div class="dad" style="font-size: 1.2em;">
    dad:font-size:1.2em; => 14*1.2=16px;
    <div class="son" style="font-size: 1.2em;">
        son:font-size:1.2em; => 14*1.2*1.2=20px;
        <div class="grandson" style="font-size: 1.2em;">
            grandson:font-size:1.2em; =>14*1.2*1.2*1.2=24px;
        </div>
    </div>
</div>

</body>

rem：

<style>
    html{
        font-size: 14px;
    }
</style>

<body>

<div class="dad" style="font-size: 1.2rem;">
    dad:font-size:1.2rem; => 14*1.2=16px;
    <div class="son" style="font-size: 1.2rem;">
        son:font-size:1.2rem; => 14*1.2=16px;
        <div class="grandson" style="font-size: 1.2rem;">
            grandson:font-size:1.2rem; => 14*1.2=16px;
        </div>
    </div>
</div>

</body>