我正在开发两个不同的响应式网站（两个都在进行中，一个来自lynda.com，仅用于练习）。据我所知，我做的第一个工作正常。 HTML为HERE，CSS为HERE。
然后我开始研究这个，创建了与上面相同的css，但是媒体查询的目标是@media only屏幕和（max-width：768px）由于某种原因没有加载。 HTML为HERE，CSS为HERE。 我花了几个小时试图弄清楚为什么，我迷路了。我两者之间没有任何区别，但有一个是有效的，有一个不是。您的任何建议将不胜感激！
我现在只是在浏览器中测试它们。
谢谢！
答案 0 :(得分：0)
我认为问题是一个网站在其HTML中有一个“meta ... viewport ...”，而在另一个网站中该语句被注释掉了。
在没有“meta ... viewport ...”的网站中，媒体查询实际上正在测试不受约束的“视口”而不是“屏幕”的尺寸（过度简化是“设备有时会谎言”）。另一方面，在具有“meta ... viewport ... width = device-width”的站点中，“视口”宽度被强制降低到与媒体查询测试之前的“屏幕”宽度相同，所以你得到不同的答案（特别是在较小的设备上）。
（根据您定位的设备，您可能需要深入了解“视口”。“视口”的行为方式有充分的理由;请不要误解我的讽刺“设备”谎言“意味着”视口是一个坏主意“。）