Question

我正在使用Semantic Grid System来构建自适应网站。但是，对于媒体查询来说，一旦达到特定的屏幕尺寸，这些查询显然会启动，这是不对的。

我会用他们的example on the website来引用我的意思：例如，如果我在我的iPhone上查看它，假设它应该适应移动设备上的单个列结构，它仍会抛出该网页的网页版本。我的iPhone上的Safari和Chrome都是如此。但是，如果我使用RWD bookmarklet检查它在不同分辨率下的外观，则会显示移动分辨率的预期效果。另外，具有讽刺意味的是，如果我在桌面上的Safari中调整页面大小，它也会在我达到合适的屏幕尺寸后进行相应调整，但不会在Firefox中调整。

一旦达到720px就会使用的媒体查询

@media screen and (max-width: 720px) {
#maincolumn,
#sidebar {
    .column(12);
    margin-bottom: 1em;
}
}

我可能在这里有广泛的意义，但我认为这一定是问题所在。但鉴于这是直接来自semantic.gs网站，我认为我不具备必须质疑他们自己的代码的专业知识。

知道问题可能是什么？

Answer 1

您描述的行为可能是因为您未在标记中使用“viewport”元标记：

<meta content="width=device-width" name="viewport">

http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/

语义网格系统，媒体查询问题

1 个答案: