Question

我不是一个强大的程序员，并且我有一个媒体查询语法问题我真的可以使用一些帮助。我找到了query specifically for high dpi devices，如果设备dpi足够高，我想用它来显示不同的图形。但是我也希望这个查询仅在屏幕低于特定的最大宽度时才能工作，这就是我在添加它时遇到的问题。以下是我一直在尝试的（所以最后一行是我添加的），但它不起作用。非常感谢任何帮助！

@media 
    only screen and (-webkit-min-device-pixel-ratio: 1.3),
	only screen and (-o-min-device-pixel-ratio: 13/10),
	only screen and (min-resolution: 120dpi),
    and (max-width: 48em)

Answer 1

目前，(max-width: 48em)已添加到触发查询的方案列表中。

您希望为每个方案指定一个包含两个条件的查询，如下所示：

@media only screen and (-webkit-min-device-pixel-ratio: 1.3) and (max-width: 48em),
       only screen and (-o-min-device-pixel-ratio: 13/10) and (max-width: 48em),
       only screen and (min-resolution: 120dpi) and (max-width: 48em) 
       {
         // Higher res image here
       }

Answer 2

@media
only screen and (-webkit-min-device-pixel-ratio: 1.3)      and (max-width: 48em),
only screen and (   min--moz-device-pixel-ratio: 1.3)      and (max-width: 48em),
only screen and (     -o-min-device-pixel-ratio: 13/10)    and (max-width: 48em),
only screen and (        min-device-pixel-ratio: 1.3)      and (max-width: 48em),
only screen and (             min-resolution: 120dpi)      and (max-width: 48em)
{ 

  /* Bla bla Bla bla**/

}

媒体查询语法问题

2 个答案: