这些媒体查询的说明

Question

任何人都可以向我解释这意味着什么？

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min-resolution: 1.5dppx),
       only screen and (min-resolution: 144dpi)
       and (min-width: 38em) {

       /*Styles*/        
}

我希望仅在宽度至少为38em的分辨率上应用视网膜的样式（两个条件必须为真）。但是当我将其插入上面的块时，它似乎无法正常工作。

Answer 1

此媒体查询有3组条件。

  

媒体查询由媒体类型和零个或多个表达式组成，用于检查特定媒体功能的条件。

第1个条件规定，像素比率为1.5或更大的webkit设备（通常是基于Apple和Android的设备）将执行以下样式。

我不相信的第二个条件是正确的W3C specification.我猜你的意思是dpi（每个CSS'英寸'的点数）或dpcm（每个CSS'厘米'的点数）。

第3个条件规定，最小分辨率为144点/英寸，最小宽度为38 em的设备将执行以下样式。请注意，em是基于先前font-size像素定义的相对度量。