媒体查询 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或max-width

style for Desktop

@media screen and (min-width: 1025px) and (max-width: 1280px) {
   /* Styles for Desktops */
 }

也添加inside标签

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

Answer 2

 /*--cover up mac , mac-book---*/
@media only screen and (min-width: 1024px) and (max-width: 1920px) {}
/*--mac book pro , and mac-book retina display screen---*/
@media only screen and (min-width: 1920px) and (max-width: 2560px) {}

Answer 3

Retina Display媒体查询

@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only 
screen and (min-device-pixel-ratio : 1.5) { styles }