带透明背景的PNG按钮图标如何适配示波器项目多设备屏幕尺寸？

可行方案有以下几种：

• 使用CSS相对单位实现尺寸自适应
  你原来的父容器.thumbs写死了64px固定宽度，换成和视口绑定的相对单位（比如vw/vmin/rem）就能跟着屏幕尺寸自动缩放，同时给img标签加自适应规则，保证图片跟着父容器尺寸走不会溢出，修改后的CSS示例：

.thumbs {
  position: fixed;
  bottom: 20px;
  right: 20px;
  /* 用vmin取视口宽高最小值的百分比，横竖屏都不会超出屏幕范围 */
  width: 8vmin;
  /* 加最小、最大宽度限制，避免图标太小按不到、太大占用操作区域 */
  min-width: 40px;
  max-width: 80px;
}

.buttonPNG{
  display:block;
  cursor: pointer;
  border: 1px;
  margin:2px;
}
/* 新增图片自适应规则 */
.buttonPNG img {
  width: 100%;
  height: auto;
  /* 优化高清屏缩小后的显示效果，避免发虚 */
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}

这个方案不需要修改现有图片资源，新增几行CSS即可生效，可直接适配所有屏幕尺寸。

• 单张高清图+srcset适配不同分辨率屏幕
  你只要准备1张3倍分辨率的PNG原图即可，不用切多套对应尺寸的图，比如原来平板适配的是64px尺寸的图标，就做1张192px宽的高清图，用img的srcset属性让浏览器自动根据屏幕的像素密度适配缩放，不会出现低清屏浪费流量、高清屏图标发虚的问题，修改后的HTML示例：

<div class="thumbs">
  <div class="buttonPNG"> 
    <img src="./home.png" alt="home" onclick="show_home()" 
         srcset="./home.png 3x"
         width="64" height="64">
  </div>
  <!-- 其余按钮按相同规则修改即可 -->
</div>

给img标签添加固定的原始宽高属性后，浏览器会自动按比例缩放，不同分辨率下显示效果都能保持清晰。

• 替换为SVG矢量图标（长期优化方案）
  如果后续有调整资源的空间，可以把PNG图标转成SVG格式，矢量图任意缩放都不会失真，文件体积比多倍高清PNG更小，也天然支持透明背景，用法和PNG完全一致，直接替换src路径即可，不需要额外修改CSS规则。

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