css---px、em和rem的区别

一、px和em和rem 的区别

        px:固定像素,设置多少就是多少

        em:相对父级元素来设置

        rem:相对根元素来设置

二、应用

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

</style>

<body>
    <div class="f_box" style="font-size: 20px">
        <div style="font-size: 30px">px</div>  <!--固定长度-->
        <div style="font-size: 2em">em</div>    <!--2*20=40  相对于f_box的倍数-->
        <div style="font-size: 0.5rem">rem</div><!--0.5*50=25  相对于html的倍数-->
        <div style="font-size: 25px">rem</div>
    </div>
</body>

三、使用场景

固定web网页使用可以使用px;如果是弹性布局,移动端可以使用em和rem

猜你喜欢

转载自blog.csdn.net/weixin_43452154/article/details/129689190