在一个网站上工作但不是另一个网站上的媒体查询

我正在两个不同的响应网站上工作（两个工作正在进行中，一个来自lynda.com仅供练习使用）。据我所知，这第一个我做得很好。 HTML是HERE，CSS是HERE。在一个网站上工作但不是另一个网站上的媒体查询

然后我开始在这个上面工作，创建了和上面一样的css，但是只针对@media屏幕和（max-width：768px）的媒体查询由于某种原因没有加载。 HTML是HERE和CSS是HERE。我花了数小时试图找出为什么，我迷路了。我没有任何分歧，但一个正在工作，一个不是。任何建议你会非常感谢！

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

谢谢！

来源

2012-09-26 Kim

我刚刚注意到你的reset.css在你的网站CSS下面。你可能想要扭转它们。 – seangates

嗨 - 谢谢，但这对媒体查询问题没有影响。 – Kim

我知道它不会。只是发表评论。 – seangates

我认为这个问题是一个网站在其HTML中有一个“meta ... viewport ...”，而在另一个网站上，该语句被注释掉了。

在没有“元...视口...”的网站中，媒体查询实际上是针对无约束的“视口”而不是“屏幕”的尺寸进行测试的（过于简单化是“设备有时会说谎”）。另一方面，在具有“meta ... viewport ... width = device-width”的网站中，“媒体查询”测试之前，“视口”宽度被强制降低为与“屏幕”宽度相同，所以您得到不同的答案（特别是在较小的设备上）。（视您所瞄准的设备而定，您可能需要深入了解一个“视口”。视口的行为方式有充分的理由，请不要误解我的讽刺“设备有时候会说谎“的意思是”视口是一个坏主意“）。

来源

2012-09-26 19:34:17

在一个网站上工作但不是另一个网站上的媒体查询

回答

相关问题