标题中的标题大小

Question

我的网站标题的徽标大小为64px×64px，所以这就是我在<style>中的内容：

header img {
  width: 64px;
  height: 64px;
}

将width和height值设置为4em是不是一个好主意，这样徽标在不同的设备上会更具响应性和可扩展性？我知道它在字体上很常见，但我想知道它是否对图像也有意义。

Answer 1

我认为是的，基于 CSS Font-Size: em vs. px vs. pt vs. percent 博客 Kyle Schaeffer ，像素不一定最适合网络文档，这留给了em和百分比单位。 像素单元问题是不会向视力不佳的读者扩展或向下扩展以适应移动设备除了 ems（em） <强大>可扩展性，具有移动设备友好性。

Answer 2

我总是给他们两种不同的尺码。最大宽度为767px，最小宽度为768px。此外，如果可能的话，我建议您使用SVG，以防人们使用像素分辨率为2k或4k的手机。你不必害怕它看起来会模糊。

Answer 3

如果您将图像作为徽标，则在em中设置宽度将无济于事。为什么？在em中给出容器宽度对于使其基于font-size增长是有用的。如果您的徽标是图像，则不应使用字体大小来调整任何内容。

更好的选择可以是使用基于百分比的meassures。将它们与媒体查询相结合，你就完成了。

Answer 4

不要这样做使用媒体查询：https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

在普通桌面视图中，您可以根据需要将其设置为像素一样宽。