在图像尺寸上使用rem,em和px

时间:2019-05-24 20:20:06

标签: html css

我正在寻找有关这些单元在图像尺寸上使用的一些解释,但找不到任何解释。我在某些地方读过一些关于像素的文章,只使用了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>

4 个答案:

答案 0 :(得分:1)

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

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

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

使用 REM 表示尺寸和间距。 将 EM 用于媒体查询。

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

答案 1 :(得分:1)

em rem 都是灵活的,可扩展的单位,浏览器会将其转换为像素值,具体取决于设计中的字体大小设置。如果您使用值1em or 1rem,,则它可以在浏览器中转换为16px to 160px或其他任何值。

px值被浏览器照原样使用,因此1px将始终显示为正确的1px

rem单位到像素值的转换由html元素的字体大小确定。

将em单位转换为像素值由使用它们的元素的字体大小决定。使用em units进行缩放,该缩放应根据根元素以外的元素的字体大小进行缩放。使用rem单位进行缩放,不需要em单位,并且该缩放应取决于有关浏览器字体大小的设置。请在media queries

上使用rem单位

答案 2 :(得分:0)

如果您要使用响应式网站,最好使用rem而不是像素。这是因为像素是绝对单位,而rem是相对于根字体大小的单位。

想象一下,您所有的元素都以像素为单位,并且想要在窗口较小时缩放所有元素。如果您有像素,则必须一一更改。但是,使用rem可以更改根目录的字体大小,并且所有内容都可以立即缩放。

尝试在下面的示例中更改字体大小,然后亲自查看:

html{
      font-size: 30px;
    }

.pixel1{
      width: 30px;
      height: 30px;
      background-color: red;
      margin-bottom: 10px;
}

.pixel2{
      width: 40px;
      height: 40px;
      background-color: red;
      margin-bottom: 10px;
}

.rem1{
      width: 1rem;
      height: 1rem;
      background-color: blue;
      margin-bottom: 10px;
}

.rem2{
      width: 1.4rem;
      height: 1.4rem;
      background-color: blue;
}
<div class="pixel1"></div>
<div class="pixel2"></div>
<div class="rem1"></div>
<div class="rem2"></div>

答案 3 :(得分:-1)

  • px渲染像素值
  • rem使用根元素(html)以其font-size为基数(默认为16px)来计算其大小,因此基本上{ {1}}乘以rem上的img
  • font-size将第一个父级与一个html一起使用来计算其需要呈现的尺寸(计算方法与上述em相同-父级计算的font-size值乘以您的rem)。如果该父母在其px中使用em,则孩子将使用父母计算/计算的em

说明可能很难掌握(尤其是font-size),请在此处查看:https://jsfiddle.net/6ydf931w/

在大多数情况下,我倾向于避免对几乎所有内容使用font-size,因为如果您不能永久了解使用位置,则可能会导致意外结果。

在需要全局更改的情况下,我通常将em限制为文本。

em是可以预见的,如果对您有用,那么使用它没有任何危害。