sass：如何仅为移动设备渲染不同的图像

Question

我不是 100% 清楚如何为仅移动视图实现与桌面视图不同的图像

例如，如果我有这个桌面图像：

&.card {
        .card-image {
          @include background-helper('gallery/old-pic.jpg', center, contain, no-repeat);
        }
      }

来自我有这段代码的 mixin 文件：

@mixin background-helper($image: false, $position: center, $size: contain, $repeat: no-repeat){
  @if $image {
    background-image: asset-url($image);
    background-repeat: $repeat;
    background-size: $size;
    background-position: $position;
  }
}

如果用户在手机上查看它，我不确定添加什么逻辑会告诉我的应用程序呈现 old-pic.jpg 以外的内容。

Answer 1

看来您必须使用媒体查询。 例如：

$break-small: 320px;
$break-large: 1200px;

.card-image {
  @media screen and (max-width: $break-small) {
    @include background-helper('gallery/mobile-pic.jpg', center, contain, no-repeat);
  }
  @media screen and (min-width: $break-large) {
    @include background-helper('gallery/old-pic.jpg', center, contain, no-repeat);
  }
}