Question

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

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

和

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

Answer 1

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

Answer 2

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

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

对于第一个近似值，min / max-width是逻辑当前窗口（可能已由用户设置），而min / max-device-width是物理屏幕。但许多移动设备不会返回您在屏幕尺寸的销售规格中阅读的内容。其中许多都包含“视口”的概念......您可以修改（使用＆lt; meta name =“viewport”content =“...），但通常默认为比实际屏幕尺寸大得多的东西。彻底理解“视口”将澄清（并可能回答）您的查询。

此外，由于移动设备通常在更近的距离观看，因此需要更密集的像素才能提供相同的用户体验。（iPad的“视网膜”显示器体现了这一趋势。）由于像素密度非常高，无论如何，小的物理尺寸都可能具有非常大的像素尺寸。（我自己的倾向是认为你最终必须在媒体查询中考虑密度才能产生真正明智的结果。）

在任何情况下，对于媒体查询的替代方案，它保留了概念但以不同的方式实现它，您可能希望查看http://www.ckollars.org/alternative-to-media-queries.html

定义CSS媒体查询

2 个答案: