CSS@media查询，包括移动和小浏览器宽度

Question

我正在尝试编写一个CSS@media查询，该查询既适用于我的移动设备，也适用于宽度小于500px的浏览器。以下内容适用于我的手机，但如果我将浏览器调整为较小大小，则不起作用。我该怎么做？

/* Smartphones and small browsers ----------- */
@media
    all and (-webkit-device-pixel-ratio: 2),
    screen and (resolution: 192dpi),
    all and (-webkit-device-pixel-ratio: 1.3),
    all and (device-aspect-ratio: 9/16) {
/* Styles */
}
/* other devices */
@media
    all and (-webkit-device-pixel-ratio: 1),
    screen and (resolution: 96dpi),
    all and (-webkit-device-pixel-ratio: 1)
 {
/* Styles */
}

Answer 1

在媒体查询中添加以下行：

all and (max-width: 500px),