媒体查询在一个站点上工作，但在另一个站点上不工作答案

【问题标题】：media queries working on one site but not another媒体查询在一个站点上工作，但在另一个站点上不工作
【发布时间】：2012-09-26 17:22:04
【问题描述】：

我正在开发两个不同的响应式网站（两个都在进行中，一个来自 lynda.com，仅供练习）。据我所知，我做的第一个效果很好。 HTML 是 HERE，CSS 是 HERE。

然后我开始研究这个，创建了与上面相同的 css，但是针对 @media only 屏幕和 (max-width: 768px) 的媒体查询由于某种原因没有加载。 HTML 是 HERE，CSS 是 HERE。我花了几个小时试图找出原因，但我迷路了。我在两者之间没有任何区别，但是一个有效，一个无效。您的任何建议将不胜感激！

我现在只是在浏览器中测试它们。

谢谢！

【问题讨论】：

我刚刚注意到您的 reset.css 在您的网站 CSS 下方。您可能想要反转它们。
嗨 - 谢谢，但这对媒体查询问题没有影响。
我知道不会。只是发表评论。

标签： css media-queries

【解决方案1】：

我认为问题在于一个站点的 HTML 中有一个“meta...viewport...”，而在另一个站点中，该声明被注释掉了。

在没有“元...视口...”的站点中，媒体查询实际上是针对不受约束的“视口”而不是“屏幕”的尺寸进行测试（过度简化是“设备有时会撒谎”）。另一方面，在具有“meta...viewport...width=device-width”的站点中，“viewport”宽度在媒体查询测试之前被强制降低到与“screen”宽度相同，所以你得到不同的答案（尤其是在较小的设备上）。

（根据您的目标设备，您可能需要深入了解“视口”。“视口”的行为方式有充分的理由；请不要误解我讽刺的“设备”谎言”的意思是“视口是个坏主意”。）

【讨论】：