这两个媒体查询有啥区别？ [复制]

Posted 2023-03-06

【中文标题】这两个媒体查询有啥区别？ [复制]

【英文标题】：What is the difference between these two media queries? [duplicate]这两个媒体查询有什么区别？ [复制]

【发布时间】：2013-10-26 10:26:44

【问题描述】：

我是使用媒体查询的新手，并在谷歌上搜索过这个，但我只是找到了引用这个的网站，但没有描述它们的实际含义。

这有什么区别：

@media screen and (max-width: 767px),
screen and (max-device-width: 767px)

还有：

@media screen and (max-width: 767px) 

这两者有什么区别？第一个目标是页面内容宽度和设备宽度还是所有方向（水平或垂直）？我在这里很困惑。

【问题讨论】：

还有：***.com/questions/8994664/combining-css-media-queries

【参考方案1】：

假设您不是在问 媒体功能 width 与 device-width 之间的区别，而是两个媒体查询本身之间的区别：知道逗号在查询用作逻辑 OR。因此，第一个查询说，

“如果它是一个最大宽度为 767px 的屏幕，或者它是一个最大设备宽度为 767px 的屏幕......”

与仅查询最大宽度的第二个查询相比。在带逗号的查询中，将评估第一个，然后是第二个，依此类推。如果其中任何一个为真，则将应用包含的 CSS。

见http://www.w3.org/TR/css3-mediaqueries/#media0

就宽度和设备宽度的工作方式而言，PPK 的http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html 仍然是一本非常有用的读物​​，它解释了为什么人们可能希望避免在媒体查询中使用设备宽度，以及对差异的很好解释。