媒体查询语法问题

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**/

}

媒体查询语法问题

Media Query Syntax Issue

html

css

syntax

media-queries