图片自适应不同型号的手机【vue手机项目图片自适应】

1.【template】

<i class="sun" v-else-if="weather=='晴天'"></i>

2.【style】

.sun,
 {
  width: 25px;
  height: 22px;
  margin-right: 5px;
  margin-left: 5px;
  background-size: cover;
  font-family: PingFang-SC-Medium;
}
@media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2) {
  .sun {
    background-image: url("./sun@2x.png");
  }
}
@media (-webkit-min-device-pixel-ratio: 3), (min-device-pixel-ratio: 3) {
  .sun {
    background-image: url("./sun@3x.png");
  }
}