我的 CSS 中的一些媒体查询被忽略了

Question

我有以下 CSS。前“4 列”媒体查询有效，其余的被忽略。如果我将 '5-columns' 放在 '1-column' 之前，那一个有效，但 '1、6 和 7 被忽略。如果我把 6 放在上面，那么 1 和 5 会被忽略。无论我把它们放在哪里，2、3 和 4 列都会继续工作。我没有看到问题。我希望任何人都可以帮助我。

#header-wrap {
    border-bottom: 1px solid #EFEFEF;
    margin: 32px 32px 16px;
    padding: 0 0 32px;
}

/* 1 column */
@media all and (max-width: 607px) {
    #header-wrap {
    width: 256px;
    }
}

/* 2 columns */
@media all and (min-width:607px) and (max-width:895px) {
    #header-wrap {
    width: 544px;
    }
}

/* 3 columns */
@media all and (min-width:895px) and (max-width:1183px) {
    #header-wrap {
    width: 832px;
    }
}

/* 4 columns */
@media all and (min-width:1183px) and (max-width:1471px) {
    #header-wrap {
    width: 1120px;
    }
}​

/* 5 columns */
@media all and (min-width:1471px) and (max-width:1759px) {
    #header-wrap {
    width: 1408px;
    }
}​

/* 6 columns */
@media all and (min-width:1759px) and (max-width:2062px) {
    #header-wrap {
    width: 1696px;
    }
}​

/* 7 columns */
@media all and (min-width:2062px) {
    #header-wrap {
    width: 1696px;
    }
}​

Answer 1

搞定了here

由于某种原因，您的一些右方括号后面有点。不知道他们来自哪里。

我还减少了您的媒体查询，以使用更少的代码实现相同的效果。粗略地说，定位屏幕的主要方法有 3 种。你可以让你的风格：

1. 样式向下，例如(min-width:320px)，所以一切都缩小到那个大小
2. 风格化(max-width:480px)，一切向上到那个尺寸
3. 括号(min-width:320px) and (max-width:480px)

您所拥有的是包围，而不是允许媒体查询中的样式级联，即 1200 像素宽的屏幕满足 (min-width:600px) 和 (min-width:1000px) 所以您只需将样式应用于较低值的查询，您有根据特定的括号分辨率重新应用样式，例如(min-width:600px) and (max-width:800px)。

这是一种完全合法的技术，但如果需要任何更改，您会发现最终需要维护更多代码。我很难学会这一点。 CSS 是为级联设计的，媒体查询也是如此。

最后，如果您要使用括号方法，请尽量避免两次指定相同的分辨率

即(min-width:320px) and (max-width:500px) 然后(min-width:500px) and (max-width:900px)

因为这可能会混淆某些浏览器或在调整屏幕大小时导致闪烁，因为有一个像素同时满足这两个条件。编写它的安全方法是：

 `(min-width:320px) and (max-width:500px)`

然后(min-width:501px) and (max-width:900px)

如果做不到这一点，向上或向下造型完全消除了这种可能性:)