在图像尺寸上使用rem,em和px [重复]

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (31)

这个问题在这里已有答案:

我正在寻找关于这些单位在图像尺寸上的使用的一些解释,但找不到任何。我在某些地方读过忘记像素并只使用rem / em,但我不知道它是否也适用于图像尺寸(宽度/高度)。

例如,在下面这种情况下我应该使用哪一个?

<img src="https://i.imgur.com/NReN4xE.png" style="width: 5rem;" />5rem<br>
<img src="https://i.imgur.com/NReN4xE.png" style="width: 5em;" />5em<br>
<img src="https://i.imgur.com/NReN4xE.png" style="width: 100px;" />100px<br>
提问于
用户回答回答于
  • px 渲染像素值
  • rem使用root元素(html)使用它font-size作为基础(默认为16px)来计算它的大小,所以基本上你的remimg乘以font-sizeonhtml
  • em使用带有a的第一个父项font-size来计算它需要渲染的大小(计算方法与rem上面相同- 父计算px值乘以你的em)。如果是父母用emfont-size,孩子会使用计算/计算的font-size母公司。

解释可能很难掌握(特别是em),看看这里:https//jsfiddle.net/6ydf931w/

在大多数情况下,我倾向于避免使用em几乎所有东西,因为如果你不是永久意识到它的使用位置,它会导致意想不到的结果。

我通常rem在需要全局更改的情况下限制文本。

px 是非常可预测的,如果这适合你,那么使用它是没有害处的。

用户回答回答于

许多CSS属性采用“长度”值,例如宽度,边距,填充,字体大小等。长度是一个数字后跟一个长度单位,例如10px,2em等。

** (px)**绝对长度单位是固定的,以这些中的任何一个表示的长度将显示为该大小。建议不要在屏幕上使用绝对长度单位,因为屏幕尺寸变化很大。但是,如果输出介质已知,则可以使用它们,例如用于打印布局。

Relative lengthunits指定相对于另一个length属性的长度。相对长度单位在不同渲染介质之间更好地缩放。 em 相对于元素的 rem 字体大小相对于根元素的font-size

使用REMs的尺寸和间距。使用EM进行媒体查询。

总之,在使用浏览器缩放时,媒体查询的像素REM都在各种浏览器中失败,并且EMs是我们拥有的最佳选择。

所属标签

可能回答问题的人

  • 人生的旅途

    10 粉丝484 提问6 回答
  • 不吃貓的鱼oo

    5 粉丝466 提问6 回答
  • 富有想象力的人

    4 粉丝0 提问5 回答
  • Richel

    8 粉丝0 提问5 回答

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励