视网膜检测中精灵的缩放图标答案

【问题标题】：Scale icon from sprite on retina detection视网膜检测中精灵的缩放图标
【发布时间】：2020-11-26 18:03:17
【问题描述】：

我想更改我正在使用 scss 的视网膜上的图标

这是我的 scss 代码：

$icon-shopping-cart-pos: -169px -289px;
$icon-shopping-cart-pos-retina: -336px -578px ;

.icon-shopping-cart {
  background: $sprite-url no-repeat $icon-shopping-cart-pos;
  width: 33px;
  height: 29px;
  @include media('retina2x') {
    background: $sprite-url-retina no-repeat $icon-shopping-cart-pos-retina;
    width: 66px;
    height: 59px;
  }
}

问题是retina2x 有它的乘数，所以图标看起来大了一倍。我需要更改图标但保持相同的高度和宽度，Retina 会自行加倍。这是必需的，以便图标在视网膜上看起来不会像素化。我尝试使用background-size，但添加属性时图标消失了。对于我正在使用的媒体混合include-media

我的 HTML：

<button
          type="button"
          @click="handleOnCartClick"
          class="ml-4 button-green btn-cart"
        >
          <i class="icon-shopping-cart  " />
        </button>

感谢您查看我的问题并帮助我。

【问题讨论】：

为什么这被标记为与 SAS 软件相关？您是否将此 HTML 用于某些 SAS 程序或报告？
@Tom 他的意思是 sass CSS 预处理器，而不是你所说的 SAS (software as service)

标签： css vue.js sass scss-mixins

【解决方案1】：

在尝试了各种 scss 技巧后，我找到了解决方案。这个想法是缩放整个视网膜精灵，而不仅仅是图标。

.icon-futalis-vet-green {
  background-image: $sprite-url;
  background-repeat: no-repeat;
  background-position: $icon-cart-pos;
  width: 35px;
  height: 35px;
  @include media('retina2x') {
    background-image: $sprite-url-retina !important; 
    background-size:324px 920px !important;
  }
}

我的初始精灵的宽 x 高为 324x920，我的视网膜是两倍大小。

因此，通过将视网膜精灵缩放到一半大小，我可以将我的精灵视为正常大小，并且不需要更改图标位置。该图标看起来不会像素化，因为我将其缩放到一半大小并且视网膜乘数（像素比）会将其恢复为原始大小，并且看起来相同

希望有人觉得这很有用。

【讨论】：