macbook pro 15" 的媒体查询

flo*_*bee 5 css retina-display media-queries responsive-design web

我正在尝试为 15" 或更小的笔记本电脑应用媒体查询,但没有成功。

这是我的媒体查询:

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

和:

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

我为 13 英寸 macbook pro 工作,但不为 15 英寸工作。

任何帮助将非常感激。

谢谢

Mic*_*ney 5

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

最小设备宽度

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

最小宽度或最大宽度

桌面样式

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

   /* Styles for Desktops */
 }
Run Code Online (Sandbox Code Playgroud)

还添加内部标签

<meta name="viewport" content="width=device-width, initial-scale=1">
Run Code Online (Sandbox Code Playgroud)