CSS macbook pro 15" 的媒体查询

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/30538086/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-30 11:13:53  来源:igfitidea点击:

media Query for macbook pro 15"

csswebresponsive-designmedia-queriesretina-display

提问by flo bee

I'm trying to apply media query for laptop 15" and smaller with no success.

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

Here is my media query:

这是我的媒体查询:

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

And:

和:

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

I works for 13inch macbook pro but no for the 15".

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

Any help would be much appreciated.

任何帮助将非常感激。

Thanks

谢谢

采纳答案by Michael Money

It might be a problem with min-device-width, as it should only work on mobile devices (tablet, smartphones):

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

min-device-width

最小设备宽度

Try using those (without -device-) so you can test it on your computer's browser.

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

min-width or max-width

最小宽度或最大宽度

Styles for Desktop

桌面样式

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

   /* Styles for Desktops */
 }

Also add inside tag

还添加内部标签

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

回答by someone

Retina Display media queries

Retina Display 媒体查询

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