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

上述所有归结如下:

1. rem 单位翻译为像素值是由 html 元素的字体大小决定的。
   

   
   

   此字体大小会被浏览器中字体大小的设置影响，除非显式重写一个具体单位。
   

   
   

   
   

2. 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区别的全部内容了，希望本文的内容对的大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。