@media 查询问题

Question

我正在修改其他人的 css，并尝试通过实现 @media 查询来使页面响应。 我实现了：

@media screen and (max-width: 1300px),
screen and (max-width: 1024px) {}

@media only screen and (max-width: 860px) {}

效果很好，但是当我实施时 @media screen and (max-width: 600px){} 好像不行。

或者 - 在 chrome 和 opera 上似乎工作得很好，但在 FF 上却不行：在 FF 上，页面在右端被剪切，没有滚动条，我真的不知道为什么。即使我使用 positon:relative，它也不会改变，我检查了 - 我没有任何 'overflow:hidden'。

另外一件事——对于媒体查询，建议使用 min-width——但如果我使用 min-width，则只应用最低的（例如 min-width:600）。

我想我在这里遗漏了一些东西......有什么建议吗？我真的很感激他们......因为我非常热衷于响应式网页设计。

Answer 1

这可能不是您的实际问题，但我认为值得指出的是，在测试对小视口大小的媒体查询的响应性时，请确保所有浏览器窗口装饰都不会妨碍您。

我最近遇到了这样的“问题”。起初我认为 Firefox 媒体查询有问题，直到我检查并意识到是浏览器导航栏大小阻止我实际调整大小低于我的最小宽度值。

即这不是页面有问题 - 导航栏中的内容太多，阻止浏览器调整大小低于某个点。这也解释了为什么不同浏览器的行为似乎不同

关闭浏览器导航栏，它工作正常。呸！

Answer 2

这是一种测试您的 @media 查询是否有效的简洁方法：

body {
    background-color:black;
}

@media screen and (min-width: 1024px) and (max-width: 1300px) {
    body {
        background-color:red;
    }
}

@media screen and (max-width:860px) {
    body {
        background-color:yellow;
    }
}

@media screen and (max-width: 600px) {
    body {
        background-color:orange;
    }
}

默认情况下，您的背景应为black，如果屏幕的最小宽度为 1024 像素，则为red，如果它低于 860 像素，则为yellow，如果它降至 600 像素，则为orange。

因此，请确保您的样式表中没有冲突的媒体查询。

http://jsfiddle.net/crUVv/show/