css中px、em和rem的有哪些区别-创新互联

小编给大家分享一下css中px、em和rem的有哪些区别，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

10年积累的网站建设、成都网站设计经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先网站制作后付款的网站建设流程，更有饶平免费网站建设让你可以放心的选择与我们合作。

前言

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 单位:

Rem 单位提供最伟大的力量并不仅仅是他们提供一致尺寸而不是继承。相反，它给我们的一个途经去获取用户的偏好来影响网站中每一处使用rem的元素大小，不再是使用固定的 px 单位。
为此，使用 rem 单位的主要目的应该是确保无论用户如何设置自己的浏览器，我们的布局都能调整到合适大小。

为什么使用 em 单位

em 单位取决于一个font-size值而非 html 元素的字体大小。

为此，em 单位的主要目的应该是允许保持在一个特定的设计元素范围内的可扩展性。

例如，您可能使用em 值设置导航菜单项的padding、 margin，line-height等值。带有0.9rem 字体大小的菜单

通过这种方式，如果您更改菜单的字体大小菜单项周围的间距将在剩余的空间按比例缩放。

总结

以上是“css中px、em和rem的有哪些区别”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容