html - 一种在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);
  }
}