css - CSS 中的@media 查询

Question

我有以下 CSS 来在不同的浏览器尺寸内对齐页面内容。但是或出于某种原因它不喜欢第一个@media 语句，换句话说，更改其中的任何内容都不会对布局做任何事情。我用 http://quirktools.com/screenfly/验证布局。
改变语句的顺序也会把事情搞砸。我迷路了

非常感谢您的帮助

谢谢

@media (min-width: 500px) and (max-width: 820px) {
CSS HERE
}
@media (min-width: 830px) and (max-width: 1025px) {
CSS HERE
}
@media (min-width: 1026px) and (max-width: 1580px) {
CSS HERE
}
@media (min-width: 1590px) and (max-width: 2000px) {
CSS HERE 
}

Answer 1

首先，您要为任何大于的屏幕尺寸定义一个屏幕尺寸，从那里您可以对介于两者之间的尺寸进行媒体查询。

这是一个例子。

/* Large desktop */
@media only screen and (min-width :75.000em) {
    .test {
        display: none;
    }
}

/* Portrait tablet to landscape and desktop */
@media only screen and (min-width :61.250em) and (max-width:74.938em) {
    .test {
        display: block;
        color: #FF0;
    }
}

/* Portrait tablet to landscape and desktop */
@media only screen and (min-width :48.000em) and (max-width:61.188em) {
    .test {
        display: none;
    }
}

/* Landscape phone to portrait tablet */
@media only screen and (min-width :30.063em) and ( max-width :47.938em) {
    .test {
        display: none;
    }
}

/* portrait phones and down */
@media only screen and (max-width :30.000em) {
    .test {
        display: block;
        color: #FF0;
    }
}