rem，em和px在图像尺寸上的使用
rem，em和px在图像尺寸上的使用
提问于 2019-05-25 04:20:06
我正在寻找关于这些单位在图像尺寸上的使用的一些解释，但找不到任何解释。我在一些地方读到过忘记像素，只使用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>
回答 1
Stack Overflow用户
发布于 2019-05-25 04:52:44
如果你想要一个响应式的网站，最好使用rem而不是像素。这是因为像素是绝对单位，而rem是相对于根的字体大小的单位。
假设您的所有元素都以像素为单位，并且希望在窗口较小时缩放所有元素。如果你有像素，你将不得不一个接一个地改变所有的东西。但是，使用rem，您可以更改root的字体大小，并且所有内容都会立即缩放。
尝试更改以下示例中的字体大小，并亲自查看：
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56299081
复制相关文章
相似问题