CSS中的媒体查询答案

【问题标题】：media query in cssCSS中的媒体查询
【发布时间】：2012-06-15 20:42:58
【问题描述】：

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

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

@media (min-width: 320px) {

}

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

【问题讨论】：

标签： html css media-queries

【解决方案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 */
}

不同之处在于，您必须在需要时覆盖您的第一个媒体查询样式，在第二个中

【讨论】：

我的设计对于 1024px 和超过 tat 尺寸是不同的，所以如果我为 1024px 编写代码，那么超过 1024px 可以写什么？
我已经根据您的评论编辑了我的答案，我希望我已经很好地理解了您的要求！

【解决方案2】：

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

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

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

【讨论】：

"只有1024px宽度的方法是什么？"如果您只想为 1024px 视口设置样式，那么这是正确的方法

【解决方案3】：

这样写：

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

}

查看http://jsfiddle.net/YhsSK/

【讨论】：