定义CSS媒体查询

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来打印和呈现[即投影仪]。）

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

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


在任何情况下，替代媒体查询，保持了概念，而是不同的实现它，你可能想看看http://www.ckollars.org/alternative-to-media-queries.html