css - macbook pro 15"的媒体查询

Question

我正在尝试对 15 英寸及更小的笔记本电脑应用媒体查询，但没有成功。

这是我的媒体查询:

@media screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1) { }

和:

@media screen and (min-device-width: 1200px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 2)  and (min-resolution: 192dpi) { }

我适用于 13 英寸 macbook pro，但不适用于 15"。

如有任何帮助，我们将不胜感激。

谢谢

Answer 1

这可能是 min-device-width 的问题，因为它只适用于移动设备(平板电脑、智能手机):

min-device-width

尝试使用这些(没有 -device-)，以便您可以在计算机的浏览器上进行测试。

min-width or max-width

桌面样式

@media screen and (min-width: 1025px) and (max-width: 1280px) {

   /* Styles for Desktops */
 }

同时添加内部标签

<meta name="viewport" content="width=device-width, initial-scale=1">