定义 CSS 媒体查询

【问题标题】：Defining CSS Media Queries定义 CSS 媒体查询
【发布时间】：2012-09-29 07:03:23
【问题描述】：

以下媒体查询在移动设备和计算机上的行为是否完全相同或有什么不同？

@media only screen and (max-width: 480px), 
screen and (max-device-width: 480px){
...
}

和

@media (max-width: 480px) {
..
}

【问题讨论】：

标签： css media-queries

【解决方案1】：

不，他们不会。这是因为device-width 与width 不同。如果您的媒体查询只有width，它们的行为会相同，但是当您引入device-width 时，您会得到不同的结果。有关更多信息，请参阅我对此问题的回复：CSS stylesheet that targets iPhone iPad not working

【讨论】：

【解决方案2】：

媒体查询本身的行为相同。但是当他们查询不同的东西时，他们很可能会得到不同的答案。

“仅屏幕”通常有效，但少数移动设备将自己归类为“手持”而不是“屏幕”。（我个人的倾向是“只有全部”更好，部分原因是它包括手持设备，部分原因是它也提供了相同的 CSS 来打印和演示 [即投影仪]。）

对于第一个近似值，min/max-width 是逻辑当前窗口（可能已由用户设置），而 min/max-device-width 是物理屏幕。但许多移动设备不会返回您在其销售规格中阅读的屏幕尺寸信息。其中许多包含“视口”的概念......您可以修改（使用 http://www.ckollars.org/alternative-to-media-queries.html

【讨论】：