Question

所以我的问题是：

我希望移动/桌面用户可能使用不同的图像，视网膜/非视网膜用户可以看到不同的图像。

目标是根据用户的屏幕优化图像大小。所以我尝试使用<picture>和<img srcset=... />，但无法使其工作，所以我可以用一种黑客攻击：

<div class="img-container">
  <div class="background-img-responsive" id="image_17691" title="The perfect denim jacket"></div>
  <style type="text/css">
    #image_17691 {
      padding-top: 48.94%;
      background-image: url(/media/W1siZiIsIjIwMTQvMDkvMTUvMTcvMDUvMzgvMzQyL1NjcmVlbl9TaG90XzIwMTRfMDlfMTVfYXRfMTEuMzkuMzVfQU0ucG5nIl0sWyJwIiwidGh1bWIiLCIxNDEweD4iXSxbInAiLCJlbmNvZGUiLCJqcGciLCItcXVhbGl0eSA0MCAtYmFja2dyb3VuZCB3aGl0ZSAtZmxhdHRlbiJdXQ/Screen%20Shot%202014-09-15%20at%2011.39.35%20AM.jpg);
    }
    @media only screen and (-webkit-min-device-pixel-ratio: 1.3),
    only screen and (-o-min-device-pixel-ratio: 13/10),
    only screen and (min-resolution: 120dppx) {
      #image_17691 {
        background-image: url(/media/W1siZiIsIjIwMTQvMDkvMTUvMTcvMDUvMzgvMzQyL1NjcmVlbl9TaG90XzIwMTRfMDlfMTVfYXRfMTEuMzkuMzVfQU0ucG5nIl0sWyJwIiwidGh1bWIiLCIyODIweD4iXSxbInAiLCJlbmNvZGUiLCJqcGciLCItcXVhbGl0eSA0MCAtYmFja2dyb3VuZCB3aGl0ZSAtZmxhdHRlbiJdXQ/Screen%20Shot%202014-09-15%20at%2011.39.35%20AM.jpg);
      }
    }
    @media (max-width: 767px) {
      #image_17691 {
        padding-top: 74.64%;
        background-image: url(/media/W1siZiIsIjIwMTQvMDkvMTUvMTcvMDUvMzgvMzk5L1NjcmVlbl9TaG90XzIwMTRfMDlfMTVfYXRfMTEuNDAuMTNfQU0ucG5nIl0sWyJwIiwidGh1bWIiLCIxMTUyeD4iXSxbInAiLCJlbmNvZGUiLCJqcGciLCItcXVhbGl0eSA0MCAtYmFja2dyb3VuZCB3aGl0ZSAtZmxhdHRlbiJdXQ/Screen%20Shot%202014-09-15%20at%2011.40.13%20AM.jpg);
      }
    }
    @media only screen and (-webkit-min-device-pixel-ratio: 1.3) and (max-width: 767px),
    only screen and (-o-min-device-pixel-ratio: 13/10) and (max-width: 767px),
    only screen and (min-resolution: 120dppx) and (max-width: 767px) {
      #image_17691 {
        background-image: url(/media/W1siZiIsIjIwMTQvMDkvMTUvMTcvMDUvMzgvMzk5L1NjcmVlbl9TaG90XzIwMTRfMDlfMTVfYXRfMTEuNDAuMTNfQU0ucG5nIl0sWyJwIiwidGh1bWIiLCIyMzA0eD4iXSxbInAiLCJlbmNvZGUiLCJqcGciLCItcXVhbGl0eSA0MCAtYmFja2dyb3VuZCB3aGl0ZSAtZmxhdHRlbiJdXQ/Screen%20Shot%202014-09-15%20at%2011.40.13%20AM.jpg);
      }
    }
  </style>
</div>

image version of the code

是否有更好的/ html5友好/未来友好/更少的标记解决方案？

Answer 1

在css中使用@media，无论是否方便，都是在不使用JavaScript或JQuery的情况下检测屏幕大小的最佳方法之一。我不认为这应该被视为黑客，因为它效率高，工作一致，易于使用。

检测视网膜屏幕非常简单，您只需使用：

@media 
(-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi) { 

    #image_17691 {
      background-image: url(/media/retina-background.jpg);
    }
}

然后对于您的其他非视网膜媒体查询，例如低分辨率智能手机，您将使用：

@media only screen 
and (max-width : 320px) {

    #image_17691 {
        background-image: url(/media/non-retina-background.jpg);
    }
}

以下是两个链接，其中包含您可以使用的不同CSS媒体查询的列表：

-Media Queries for Standard Devices

-Media Queries for Retina & High Resolution Devices

响应图像与多个背景可能替代

1 个答案: