Question

如何在CSS中的响应式图像的媒体查询中组合宽度和像素比率？

每张图片我有4个案例：中宽屏幕，中等宽度和宽度像素比率2（视网膜显示），宽度大，视网膜宽度大。到目前为止，我只能触发宽度或像素比率，但不能同时触发两者。

我正在使用SASS mixin为我节省一些打字：

$screen-md: 1200;
$screen-lg: 1500px;

@mixin respImg($image) {
  width: 100%;
  background-image: url("http://quantumtribal.com/test/#{$image}_md.jpg");
  background-size: cover;
  background-position: center center;
  p { height: 500px; }

  @media
    only screen and (min-width: $screen-md) and (-webkit-min-device-pixel-ratio: 2),
    only screen and (min-width: $screen-md) and (min--moz-device-pixel-ratio: 2), 
    only screen and (min-width: $screen-md) and (-o-min-device-pixel-ratio: 2), 
    only screen and (min-width: $screen-md) and (min-device-pixel-ratio: 2)
    { background-image: url("http://quantumtribal.com/test/#{$image}_md@2x.jpg"); }

  @media
    only screen and (min-width: $screen-md) and (-webkit-min-device-pixel-ratio: 1),
    only screen and (min-width: $screen-md) and (min--moz-device-pixel-ratio: 1), 
    only screen and (min-width: $screen-md) and (-o-min-device-pixel-ratio: 1), 
    only screen and (min-width: $screen-md) and (min-device-pixel-ratio: 1)
    { background-image: url("http://quantumtribal.com/test/#{$image}_med.jpg"); }


  @media
    only screen and (min-width: $screen-lg) and (-webkit-min-device-pixel-ratio: 2), 
    only screen and (min-width: $screen-lg) and (min--moz-device-pixel-ratio: 2), 
    only screen and (min-width: $screen-lg) and (-o-min-device-pixel-ratio: 2), 
    only screen and (min-width: $screen-lg) and (min-device-pixel-ratio: 2)
    { background-image: url("http://quantumtribal.com/test/#{$image}_lg@2x.jpg"); }

  @media
    only screen and (min-width: $screen-lg) and (-webkit-min-device-pixel-ratio: 1), 
    only screen and (min-width: $screen-lg) and (min--moz-device-pixel-ratio: 1), 
    only screen and (min-width: $screen-lg) and (-o-min-device-pixel-ratio: 1), 
    only screen and (min-width: $screen-lg) and (min-device-pixel-ratio: 1)
    { background-image: url("http://quantumtribal.com/test/#{$image}_lg.jpg"); }
}

#testImage { @include respImg("test"); }

我知道，我可以在HTML中使用srcset和/或<picture>，但由于我的布局的性质，我不得不在项目中使用背景图像。

CSS背景图像组合像素比率和宽度

0 个答案: