我正在寻找有关这些单元在图像尺寸上使用的一些解释,但找不到任何解释。我在某些地方读过一些关于像素的文章,只使用了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>
答案 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
答案 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
是可以预见的,如果对您有用,那么使用它没有任何危害。