css中px、em和rem有什么区别


这篇文章主要介绍“css中px、em和rem有什么区别”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“css中px、em和rem有什么区别”文章能帮助大家解决问题。前言em 和 rem 都是灵活可扩展的单位,由浏览器转换为像素值,取决于设计中的字体大小,如果使用值 1em 或 1rem ,它可以被浏览器转换为从 16px 到 160px 或其他任意值。浏览器使用 1px ,那么 1px 始终显示为完全 1px。em 和 rem 的相同点使用 em 和 rem 单位可以让我们的设计更加灵活,能够控制元素整体放大缩小,而不是固定大小em 和 rem 区别区别是浏览器根据谁来转化成 px 值rem 单位如何转化为像素值当使用 rem 单位,他们转化为像素大小取决于页根元素的字体大小,即 html 元素的字体大小。 根元素字体大小乘以你 rem 值。
例如,根元素的字体大小 16px,10rem 将等同于 160px,即 10 x 16 = 160。em 单位如何转换为像素值当使用em单位时,像素值将是 em 值乘以使用 em 单位的元素的字体大小。例如,如果一个 div 有 18px 字体大小,10em 将等同于 180px,即 10 18 = 180。重点理解:有一个比较普遍的误解,认为 em 单位是相对于父元素的字体大小。 事实上,根据W3标准 ,它们是相对于使用em单位的元素的字体大小。父元素的字体大小可以影响 em 值,但这种情况的发生,纯粹是因为继承。 让我们看看为什么以及如何起作用。你需要知道的:根 html 元素将继承浏览器中设置的字体大小,除非显式设置固定值去覆盖。所以 html 元素的字体大小虽然是直接确定 rem 值,但字体大小可能首先来自浏览器设置。因此浏览器的字体大小设置可以影响每个使用 rem 单元以及每个通过 em 单位继承的值。总结与 rem 差异 em上述所有归结如下:rem 单位翻译为像素值是由 html 元素的字体大小决定的。 此字体大小会被浏览器中字体大小的设置影响,除非显式重写一个具体单位。
em 单位转为像素值,取决于他们使用的字体大小。 此字体大小受从父元素继承过来的字体大小,除非显式重写与一个具体单位。
为什么使用 rem 单位:Rem 单位提供最伟大的力量并不仅仅是他们提供一致尺寸而不是继承。 相反,它给我们的一个途经去获取用户的偏好来影响网站中每一处使用rem的元素大小,不再是使用固定的 px 单位。
为此,使用 rem 单位的主要目的应该是确保无论用户如何设置自己的浏览器,我们的布局都能调整到合适大小。为什么使用 em 单位em 单位取决于一个font-size值而非 htm 香港云主机l 元素的字体大小。
为此,em 单位的主要目的应该是允许保持在一个特定的设计元素范围内的可扩展性。
例如,您可能使用em 值设置导航菜单项的padding、 margin,line-height等值。带有0.9rem 字体大小的菜单
通过这种方式,如果您更改菜单的字体大小菜单项周围的间距将在剩余的空间按比例缩放。关于“css中px、em和rem有什么区别”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注开发云行业资讯频道,小编每天都会为大家更新不同的知识点。

相关推荐: 如何在笔记本电脑上删除guest账户

这篇文章主要介绍了如何在笔记本电脑上删除guest账户的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇如何在笔记本电 香港云主机脑上删除guest账户文章都会有所收获,下面我们一起来看看吧。方法/步骤:1.调出运行窗口,输入comp…

免责声明:本站发布的图片视频文字,以转载和分享为主,文章观点不代表本站立场,本站不承担相关法律责任;如果涉及侵权请联系邮箱:360163164@qq.com举报,并提供相关证据,经查实将立刻删除涉嫌侵权内容。

(0)
打赏 微信扫一扫 微信扫一扫
上一篇 07/16 16:50
下一篇 07/16 17:32

相关推荐