css中的媒体查询

Question

如何仅为1024px宽度编写媒体查询？

这是我现有的css，我写的是320px宽度和更多

@media (min-width: 320px) {

} 

只有1024px宽度的方法是什么？

Answer 1

我相信你想要这个：

@media (min-width: 320px) and (max-width: 1023px) {
    /* styles for width > 320px but < 1023px */
}


@media (min-width: 1024px) {
 /* styles for width > 1024px only */
}

这样您就不必覆盖任何样式。

否则你可以这样做：

@media (min-width: 320px) {
    /* styles for width > 320px - applied to width > 1024px too */
}


@media (min-width: 1024px) {
 /* styles for width > 1024px only */
}

在第二个

中，当你需要覆盖你的第一个媒体查询样式时，这是不同的

Answer 2

我想如果你只是想要1024，而不是1023或更少，或1025或更多，你可以做

@media (width: 1024px) {
    ....
 }

最小/最大前缀是可选的。 See the w3 entry on it

Answer 3

像这样写：

@media (max-width:1024px) {
 body{..}

} 

选中此http://jsfiddle.net/YhsSK/