全国服务热线:4008-888-888

技术知识

浅析CSS中企业px、rem、em、vh、vw之间的差别

肯定长度

px

px是像素值,是1个固定不动的长度,例如大家的米,厘米1样。

相对性长度

为何大家必须相对性长度rem em等?

固定不动长度早已不可以考虑大家如今的要求了。

举例:例如大家在变小大家显示屏的情况下,大家不仅是必须变小大家的盒子的宽高,大家还要想让大家字体样式尺寸也随之变小,这样客户体验会更好1点。

rem

rem 与 px 的测算关联

rem的值是px的倍数

默认设置状况下font-size = 16px,那末1rem = 16px

rem 怎样改动与px的相对性测算关联

大家能够在而且只能在html标识(由于html连接点是根连接点,便是rem里边的r:root)里边改动font-size : 32px, 从而1rem = 32px

编码

<div class="div-rem">rem</div>
/* rem的用法 */
html{
    font-size:16px;  // 1rem = 16px
}
.div-rem{
    width: 10rem;    // 10rem = 10 x 16 = 160px
    height: 10rem;   // 10rem = 10 x 16 = 160px
    font-size: 1rem; // 1rem = 16px
    background-color: #a58778;
}

em

em 与 px 的测算关联

em的值是px的倍数

默认设置状况下font-size = 16px,那末1em = 16px

em 怎样改动与px的相对性测算关联

大家能够在自身元素上面改动font-size : 32px, 从而1em = 32px

假如自身元素上面沒有设定font-size, 大家还可以在父元素上面设定font-size,从而来危害自身元素(孩子元素)应用的em的值。

rem 与 em 的差别

总结

到此这篇有关CSS中企业px、rem、em、vh、vw之间的差别的文章内容就详细介绍到这了,更多有关px、rem、em、vh、vw的差别內容请检索脚本制作之家之前的文章内容或再次访问下面的有关文章内容,期待大伙儿之后多多适用脚本制作之家!



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服