匹配设备像素比率范围

Question

我有三种不同的精灵表，一种是1：1分辨率，@ 2，@ 3。

当我最初编写样式表时，我将标准精灵放在全局命名空间中，然后对视网膜图像进行以下操作。

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( -moz-min-device-pixel-ratio: 2), only screen and ( min--moz-device-pixel-ratio: 2), only screen and ( -ms-min-device-pixel-ratio: 2), only screen and ( -o-min-device-pixel-ratio: 2/1), only screen and ( min-device-pixel-ratio: 2), only screen and ( min-resolution: 192dpi), only screen and ( min-resolution: 2dppx)

这个问题是为该分辨率的用户下载了@ 1和@ 2 spritesheets。如果我要封装@ 1样式，我必须匹配一系列比率，例如1.25,1.3,1.5等。

有没有办法将设备像素比率设为0-2，并为其应用样式？

编辑：请注意，我想完全保留CSS;我知道在javascript中执行此操作的各种方法。

Answer 1

你可以这样做

@media screen and (min-device-pixel-ratio: 1.5)

您可以设置最小值。在我的工作中，我们只设置最小值，你可以说min例如大于1.2，并使用x2图像获得1.2以上的任何值。

如果你真的想做范围，还有最大设备像素比，但我认为不需要

@media (min-device-pixel-ratio:1.2) and (max-device-pixel-ratio:2)

这是1.2 - 2

的范围