Question

我是新的格式化我的代码以适应iPhone（特别是4和5）。你有两个图像添加到CSS（没有媒体查询）？或者您是否需要使用该背景图像进行媒体查询？

Answer 1

基本上是的，您需要执行以下操作：

    .repeatingPattern {
     background: url(../images/bgPattern.png) repeat;
     background-size: 100px 100px;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
     .repeatingPattern {
          background: url(../images/bgPattern@2x.png) repeat;
     }
}

但如果您使用的是jquery，那么这样做会更有效：

<img class="hires" alt="" src="search.png" width="100" height="100" />
<script type="text/javascript">
$(function () {

    if (window.devicePixelRatio == 2) {

          var images = $("img.hires");

          // loop through the images and make them hi-res
          for(var i = 0; i < images.length; i++) {

            // create new image name
            var imageType = images[i].src.substr(-4);
            var imageName = images[i].src.substr(0, images[i].src.length - 4);
            imageName += "@2x" + imageType;

            //rename image
            images[i].src = imageName;
          }
     }

});
</script>

怎么做。@ 2x工作

1 个答案: