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 以外的内容，如果用户正在移动设备上查看它 phone。

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);
  }
}

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

sass: how to render different images for mobile only

sass

breakpoint-sass