css - 这些媒体查询的解释

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.5 或更大的 webkit 设备（通常是基于 Apple 和 Android 的设备）将执行以下样式。

根据W3C 规范，我不认为第二个条件是正确的。我猜你的意思是dpi（每CSS'英寸'的点数）或dpcm（每CSS'厘米'的点数）。

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