4

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

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

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

效果很好，但是当我实现 @media screen 和 (max-width: 600px){} 时，它似乎不起作用。

或者 - 在 chrome 和 opera 上似乎工作得很好，但在 FF 上却不行：在 FF 上，页面在右端被剪切，没有滚动条，我真的不知道为什么。即使我使用位置：相对，它也不会改变，我检查 - 我没有任何“溢出：隐藏”。

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

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

4

2 回答 2

11

这是一种测试您的@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;
    }
}

如果您的屏幕的最小宽度为 1024 像素，如果它低于 860 像素，并且如果它下降到 600像素，则您的背景应该是black默认的。redyelloworange

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

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

于 2012-01-05T12:54:21.310 回答
5

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

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

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

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

于 2012-03-25T00:30:32.573 回答