Question

我正在修改别人的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上，页面在右端切割，没有滚动条，我真的不知道为什么。即使我使用positon它也不会改变：亲戚，我checke - 我没有任何'溢出：隐藏'。

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

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

Answer 1

这是一种测试@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像素，black（如果低于860px）和red如果它下降到600px。

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

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

Answer 2

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

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

即。它不是页面错误 - 导航栏中有太多东西阻止浏览器在某个点以下调整大小。这也解释了为什么行为在不同的浏览器中似乎不同

关闭浏览器导航栏，它运行正常。卫生署！

@media查询问题

2 个答案: