一种处理html视网膜图像的方法

Question

我希望这不是一个蹩脚的问题，因为我没有在html / css中处理视网膜的经验，但我想问一下：如果我做这样的话，这是个好主意。

$(document).ready(function(){

    if (window.devicePixelRatio > 1) {

        $('body').addClass('retina');
    }
});

实际上，如果屏幕是视网膜，我在body标签上添加了一个类retian，所以在css中我可以写一下：

img {
    background: url(images/myimg.jpg);
}
.retina img {
    background: url(images/myimg@2x.jpg);
}

我希望如果我做得不对，有人可以解释为什么。提前感谢您的反馈。

Answer 1

这是一个好主意，但现在不一定是标准。 CSS具有使用媒体查询识别视网膜屏幕的能力。我推荐

img {
  background: url(images/myimg.jpg);
}

@media print,
(-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {
  img {
    background: url(images/myimg@2x.jpg);
  }
}