在哪个顺序中使用 Twitter Bootstrap 断点？

Question

媒体查询的 Twitter Bootstrap 断点必须自上而下还是自下而上使用以及何时定义最大宽度定义 - 在最小宽度定义之前还是之后？我似乎没有从 tb-stylesheet 中得到答案。在我自己的样式表中使用这些断点时，顺序似乎很重要，因为我遇到了定义灭绝或无知。

我需要注意 < 768 的设备（这是 *-xs 定义的最后一个断点）。我必须注意 320px、480px 和 600px，并尝试构建可靠的处理顺序。这些是我目前的定义，它们在某些时候似乎相互覆盖。

/* lg and up */
@media (min-width: 1200px)
/* md only */
@media (min-width: 992px) and (max-width: 1199px)
/* md and up */
@media (min-width: 992px)
/* sm only */
@media (min-width: 768px) and (max-width:  991px)
/* sm and up */
@media screen and (min-width: 768px)
/* xs only */
@media (min-width: 767px)
@media screen and (min-width: 480px) and (max-width: 767px)
/* e.g. iPhone 5 landscape */
@media screen and (min-width: 568px)
/* e.g. iPhone 4 landscape */
@media screen and (min-width: 480px)
/* e.g. iPhone 4 portrait */
@media screen and (min-width: 320px)
@media screen and (max-width: 320px)
/* e.g. Blackberry */
@media screen and (max-width: 349px)
@media screen and (max-width: 479px)
@media screen and (max-width: 567px)
@media screen and (max-width: 991px)

有人可以阐明防止定义消失的正确顺序吗？

Answer 1

CSS 级联规则适用于媒体查询，因此，如果您想用媒体查询覆盖规则，您需要确保媒体查询包含具有相同选择器（或具有相同选择器的选择器）的规则更具体）并且它是在您要覆盖的规则之后加载的。

当您有多个媒体查询时同样适用。级联顺序以及特异性和继承规则将决定是否应用媒体查询。举个例子：

body {
    background-color: teal;
}
@media (min-width: 600px) {
    body {
        background-color: tomato;
    }
}
@media (min-width: 400px) {
    body {
        background-color: yellowgreen;
    }
}

上面的每个选择器都是相同的，因此它们具有相同的特异性，但由于级联顺序，背景永远不会是番茄色。如果正文的宽度为 600 像素或更多，则制作背景番茄的规则将被最后一条规则覆盖，该规则也适用，因为 600 像素也比 400 像素宽。

如果按如下方式重新排序规则：

body {
    background-color: teal;
}
@media (min-width: 400px) {
    body {
        background-color: yellowgreen;
    }
}
@media (min-width: 600px) {
    body {
        background-color: tomato;
    }
}

现在，当正文宽度小于 400px 时，正文背景将为蓝绿色。正文为 400px - 599px 时为黄绿色，背景为 600px 或更大时为番茄色。

当然，你也可以使用最大宽度。例如，如果您有以下顺序，黄绿色规则的宽度限制为 599px 将确保该规则在正文为 600px 或更大时不适用：

body {
    background-color: teal;
}
@media (min-width: 600px) {
    body {
        background-color: tomato;
    }
}
@media (min-width: 400px) and (max-width: 599px) {
    body {
        background-color: yellowgreen;
    }
}

因此，对于 TL;DR 版本，请首先考虑移动设备。使用为最小设备定义的基本样式来组织样式表。然后从下一个最小的设备尺寸开始对您的媒体查询进行排序，这样您要支持的最大的设备排在最后。

并且，不要忘记确保媒体查询中使用选择器的规则与您要覆盖的规则相同或更具体。

在哪个顺序中使用 Twitter Bootstrap 断点？

In which ordering to use Twitter Bootstrap Breakpoints?

twitter-bootstrap-3

media-queries

breakpoints