css中px、em和rem的区别总结
我要评论（福利推荐：你还在原价购买阿里云服务器？现在阿里云0.8折限时抢购活动来啦！4核8G企业云服务器仅2998元/3年，立即抢购>>>：9i0i.cn/aliyun）
前言
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值而非 html 元素的字体大小。
为此，em 单位的主要目的应该是允许保持在一个特定的设计元素范围内的可扩展性。
例如，您可能使用em 值设置导航菜单项的padding、 margin，line-height等值。带有0.9rem 字体大小的菜单
通过这种方式，如果您更改菜单的字体大小菜单项周围的间距将在剩余的空间按比例缩放。
总结
- rem 和 em 单位是由浏览器基于你的设计中的字体大小计算得到的像素值。
- em 单位基于使用他们的元素的字体大小。
- rem 单位基于 html 元素的字体大小。
- em 单位可能受任何继承的父元素字体大小影响
- rem 单位可以从浏览器字体设置中继承字体大小。
- 使用 em 单位应根据组件的字体大小而不是根元素的字体大小。
- 在不需要使用em单位，并且需要根据浏览器的字体大小设置缩放的情况下使用rem。
- 使用rem单位，除非你确定你需要 em 单位，包括对字体大小。
- 媒体查询中使用 rem 单位
- 不要在多列布局中使用 em 或 rem -改用 %。
- 不要使用 em 或 rem，如果缩放会不可避免地导致要打破布局元素。
以上就是关于css中px、em和rem区别的全部内容了，希望本文的内容对的大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。
相关文章
- 这篇文章主要介绍了CSS中单位px、rem、em、vh、vw之间的区别,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-05-25
CSS 中px、em、rem、%、vw、vh单位之间的区别详解
这篇文章主要介绍了CSS 中px、em、rem、%、vw、vh单位之间的区别，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2020-03-16
这篇文章主要介绍了postcss-pxtorem移动端适配的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学2019-12-03
这篇文章主要介绍了css基于媒体查询和 rem 的响应式布局实践的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-30
移动端使用 rem 单位时 css sprites 定位问题的解决
现在开发移动端 wap 页面，相信大家都会使用强大的 rem 单位去适配各种机型和屏幕；这篇文章主要介绍了移动端使用 rem 单位时 css sprites 定位问题的解决，小编觉得挺不错2018-06-20- 本文主要介绍了CSS中px em rem区别与使用。具有很好的参考价值。下面跟着小编一起来看下吧2017-03-27
- 国内的设计师大都喜欢用px，而国外的网站大都喜欢用em和rem，那么三者有什么区别呢？下面程序员之家小编给大家详细介绍下2016-05-06
这篇文章主要介绍了CSS 中 em 和 rem 单位的区别,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-05-24
最新评论