像素比的媒体查询不起作用

Question

我试图将视网膜背景图像放在某些元素中，但实际上让这些媒体查询工作时遇到了麻烦。崇高的文本也不会在语法上突出显示它们，所以我很确定这个堆栈已经坏了，但我不知道该怎么做。请帮忙？

@media
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (   min--moz-device-pixel-ratio: 1.5),
only screen and (   -o-min-device-pixel-ratio: 1.5/1),
only screen and (        min-device-pixel-ratio: 1.5){ 
}

Answer 1

只需应用一个像素比例即可使其工作。想想看，当 -webkit-min-device-pixel-ratio 为 1.5 时，不会是 -o-min-device-pixel-ratio。我们只有“和”规则。如果所有规则一次都不为真，则不会应用该条件。

试试这个代码：

only screen and ( min-device-pixel-ratio: 1.5 ){ 
}

对于其他规则，每次都单独应用它们。这将导致您的 CSS 代码很长，但这是目前唯一的解决方案。