0

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

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

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

谢谢你！

4

1 回答 1

0

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

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

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

于 2012-09-26T19:34:17.003 回答