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

如何在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和/或

，但由于布局的性质，我不得不在项目中使用背景图像