Question

我有以下css。第一个“4列”媒体查询工作，其余部分被忽略。如果我在“1列”之前放置“5列”，那么一个可以工作，但是“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

出于某种原因，你的一些结束方括号后面有一些点。不知道他们来自哪里。

我还用较少的代码减少了媒体查询的效果。简而言之，有三种主要的屏幕定位方法。你可以让自己的风格：

样式下降，例如(min-width:320px)，所有向下到那个大小
样式向上(max-width:480px)，向上的所有内容
行(min-width:320px) and (max-width:480px)

你在那里有什么包围，而不是允许媒体查询中的样式级联，即1200px宽屏幕符合(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)

如果做不到这一点，造型上下都会完全消除这种可能性：）

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

1 个答案: