@media查询问题

Question

我正在修改其他人的CSS,我尝试通过实现@media查询来使页面响应.我实施了:

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

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

哪个工作正常,但当我实现@media屏幕和(max-width:600px){}时,它似乎无法正常工作.

或者 - 在chrome和opera上似乎工作得很好,但不在FF上:在FF上,页面在右端切割,没有滚动条,我真的不知道为什么.即使我使用positon它也不会改变:亲戚,我checke - 我没有'overflow:hidden'.

另一件事 - 对于媒体查询,建议使用最小宽度 - 但如果我使用最小宽度,则仅应用最低(例如最小宽度: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像素,如果它低于860px,并且它下降到600px black,red则默认情况下应该是背景.yelloworange

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

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

Answer 2

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

我最近遇到了这样的“问题”。起初，我认为Firefox媒体查询有问题，直到我检查并意识到这是浏览器导航栏的大小使我无法真正调整到最小宽度值以下。

即不是页面有问题-导航栏中有太多东西阻止浏览器调整到特定点以下。这也解释了为什么行为在不同的浏览器中看起来有所不同

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