淘宝网站首页怎么做,中国最大的外贸平台,广西核心关键词seo报价,中国建设银行官网站纪念币前言
em 和 rem 都是灵活可扩展的单位#xff0c;由浏览器转换为像素值#xff0c;取决于设计中的字体大小#xff0c;如果使用值 1em 或 1rem #xff0c;它可以被浏览器转换为从 16px 到 160px 或其他任意值。浏览器使用 1px #xff0c;那么 1px 始终显示为完全 1px。…前言
em 和 rem 都是灵活可扩展的单位由浏览器转换为像素值取决于设计中的字体大小如果使用值 1em 或 1rem 它可以被浏览器转换为从 16px 到 160px 或其他任意值。浏览器使用 1px 那么 1px 始终显示为完全 1px。
em 和 rem 的相同点
使用 em 和 rem 单位可以让我们的设计更加灵活能够控制元素整体放大缩小而不是固定大小
em 和 rem 区别
区别是浏览器根据谁来转化成 px 值
rem 单位如何转化为像素值
当使用 rem 单位他们转化为像素大小取决于页根元素的字体大小即 html 元素的字体大小。 根元素字体大小乘以你 rem 值。
例如根元素的字体大小 16px10rem 将等同于 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值而非 html 元素的字体大小。
为此em 单位的主要目的应该是允许保持在一个特定的设计元素范围内的可扩展性。
例如您可能使用em 值设置导航菜单项的padding、 marginline-height等值。带有0.9rem 字体大小的菜单
通过这种方式如果您更改菜单的字体大小菜单项周围的间距将在剩余的空间按比例缩放。
总结
rem 和 em 单位是由浏览器基于你的设计中的字体大小计算得到的像素值。em 单位基于使用他们的元素的字体大小。rem 单位基于 html 元素的字体大小。em 单位可能受任何继承的父元素字体大小影响rem 单位可以从浏览器字体设置中继承字体大小。使用 em 单位应根据组件的字体大小而不是根元素的字体大小。在不需要使用em单位并且需要根据浏览器的字体大小设置缩放的情况下使用rem。使用rem单位除非你确定你需要 em 单位包括对字体大小。媒体查询中使用 rem 单位不要在多列布局中使用 em 或 rem -改用 %。不要使用 em 或 rem如果缩放会不可避免地导致要打破布局元素。
以上就是关于css中px、em和rem区别的全部内容了希望本文的内容对的大家的学习或者工作能带来一定的帮助如果有疑问大家可以留言交流。
