CSS图标叠加图片：浏览器缩放时如何调整图标尺寸？

嘿，我帮你分析下问题所在：你用vw单位让文本完美跟随视口缩放，但给#switch_icon用@media设置固定px尺寸时，它没法跟着缩放——这是因为px是绝对单位，不管视口宽度怎么变，它的大小都是固定死的，和vw这种相对视口的单位逻辑不匹配。

方案1：把@media里的固定px换成vw单位 #

把@media断点里的height和width都改成vw单位，这样图标就能和文本一样，基于视口宽度动态调整大小了。另外你原来的CSS最后一个@media块没闭合，记得补上}，不然会导致CSS解析出错。

修改后的完整代码：

<style type="text/css">
.image_label { 
  position: relative; 
}
.image_label img { 
  display: block; 
}
.image_label span { 
  position: absolute; 
  font-size: 0.5vw; 
  font-weight: bold; 
  z-index: 1; 
  border: 1px solid #ababab; 
  background: #ffff80; 
}
/* 用vw替代固定px，让图标跟随视口缩放 */
@media only screen and (min-width: 300px) and (max-width: 500px){ 
  #switch_icon{ 
    height: 8vw; /* 500px视口下对应40px，匹配原设置 */
    width: 8vw; 
  } 
}
@media only screen and (min-width: 150px) and (max-width: 300px) { 
  #switch_icon{ 
    height: 4vw; /* 300px视口下对应12px，匹配原设置 */
    width: 4vw; 
  } 
}
@media only screen and (min-width: 50px) and (max-width: 150px) { 
  #switch_icon{ 
    height: 2.67vw; /* 150px视口下对应4px，匹配原设置 */
    width: 2.67vw; 
  } 
}
</style>
<div class="image_label">
  <span style="bottom: 71.5%; left: 49.5%;">12 °C</span>
  <span style="bottom: 62%; left: 49.5%;">15 °C</span>
  <img src="http://test.com/portal/attachment/download?uid=9b8ab620-29a5-4274-ac19-c0b097cef42a" alt="file_schema" width="100%" />
  <span style="bottom: 74%; left: 41%;" ><img id="switch_icon" src="/portal/IconServlet/1970" /></span>
</div>

方案2：直接用vw单位，删掉所有@media（更简洁） #

其实你完全可以不用写一堆@media断点，直接给#switch_icon设置基于vw的固定比例尺寸，这样它会全程跟随视口缩放，和你的文本缩放逻辑完全统一，代码也更干净：

#switch_icon{ 
  height: 2.5vw; 
  width: 2.5vw; 
  /* 你可以根据需要调整这个数值，比如想要图标是文本大小的5倍，文本是0.5vw，那就是2.5vw，比例自己把控 */
}

这样不管视口怎么变，图标都会和文本保持一致的缩放比例，再也不用操心断点的问题啦。

内容的提问来源于stack exchange，提问作者window