CSS/HTML

推荐列表 站点导航

当前位置:首页 > 脚本编程 > CSS/HTML >

CSS中单位px、rem、em浅析

来源:网络整理  作者:  发布时间:2020-12-22 08:28
这篇文章主要介绍了CSS中单位px、rem、em之间的区别,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具...

rem 如何修改与px的相对计算关系

推荐教程:《CSS教程

px是像素值,是一个固定的长度,比如我们的米,厘米一样。

rem

rem 与 px 的计算关系

相对长度

为什么我们需要相对长度rem em等?

默认情况下font-size = 16px,那么1rem = 16px

<p class="p-rem">rem</p> /* rem的用法 */ html{ font-size:16px; // 1rem = 16px } .p-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 的计算关系

如果自己元素上面没有设置font-size, 我们也可以在父元素上面设置font-size,从而来影响自己元素(孩子元素)使用的em的值。

默认情况下font-size = 16px,那么1em = 16px

CSS中单位px、rem、em浅析

代码

举例:比如我们在缩小我们屏幕的时候,我们不仅仅是需要缩小我们的盒子的宽高,我们还想要让我们字体大小也随之缩小,这样用户体验会更好一点。

绝对长度

px

em的值是px的倍数

我们可以在并且只能在html标签(因为html节点是根节点,就是rem里面的r:root)里面修改font-size : 32px, 从而1rem = 32px

em 如何修改与px的相对计算关系

rem的值是px的倍数

我们可以在自己元素上面修改font-size : 32px, 从而1em = 32px

固定长度已经不能满足我们现在的需求了。

相关热词: CSS

本站内容来源于网络,如有侵权请与我们联系,我们会及时删除,我们深感抱歉!
注:本站所有信息仅供用于网络技术学习参考,学习中请遵循相关法律法规!

本文地址: https://v30.fanwenzhu.com/jiaob/cssm/7048.shtml

Copyright © www.juheyunku.com      关于 | 合作 | 声明 | 联系 | 更新 | 地图 | Tags

CSS中单位px、rem、em浅析

2020-12-22 编辑:

rem 如何修改与px的相对计算关系

推荐教程:《CSS教程

px是像素值,是一个固定的长度,比如我们的米,厘米一样。

rem

rem 与 px 的计算关系

相对长度

为什么我们需要相对长度rem em等?

默认情况下font-size = 16px,那么1rem = 16px

<p class="p-rem">rem</p> /* rem的用法 */ html{ font-size:16px; // 1rem = 16px } .p-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 的计算关系

如果自己元素上面没有设置font-size, 我们也可以在父元素上面设置font-size,从而来影响自己元素(孩子元素)使用的em的值。

默认情况下font-size = 16px,那么1em = 16px

CSS中单位px、rem、em浅析

代码

举例:比如我们在缩小我们屏幕的时候,我们不仅仅是需要缩小我们的盒子的宽高,我们还想要让我们字体大小也随之缩小,这样用户体验会更好一点。

绝对长度

px

em的值是px的倍数

我们可以在并且只能在html标签(因为html节点是根节点,就是rem里面的r:root)里面修改font-size : 32px, 从而1rem = 32px

em 如何修改与px的相对计算关系

rem的值是px的倍数

我们可以在自己元素上面修改font-size : 32px, 从而1em = 32px

固定长度已经不能满足我们现在的需求了。

本站内容来源于网络,如有侵权请与我们联系,我们会及时删除,我们深感抱歉!
注:本站所有信息仅供学习参考!
本文地址为 https://v30.fanwenzhu.com/jiaob/cssm/7048.shtml

相关文章

风云图片

推荐阅读

返回CSS/HTML频道首页