Question

我是新学习的响应式设计。我在旅途中注意到的是，当我将媒体查询放在样式表的底部时，一切都在断点方面完美无瑕。如果我将媒体查询放在样式表的顶部，则没有任何作用，直到最近我才发现我需要将！important和max-DEVICE-width（而不是max-width）添加到正在更改的css中

这是为什么？当放在样式表的底部时，为什么媒体查询在桌面和移动设备上都有效。

为什么当我将媒体查询置于样式表的顶部时，我需要添加！important和max- DEVICE -width，以便断点能够在桌面和移动设备上运行？

Answer 1

因为css是从上到下阅读的。最后设置的规则是将要执行的规则。

翻译，就像这样：

@media (max-width: 600px) { //If my screen fits this size
    .text {
        color: red; //Paint it red
    }
}

.text {
    color: yellow; //Now, forget about everything and paint it yellow!
}

当您添加!important时，就像说：

@media (max-width: 600px) { //If my screen fits this size
    .text {
        color: red !important; //Paint it red, and don't change it ever!!!
    }
}

.text {
    color: yellow; //Ok, I'm not going to paint it yellow....
}

Answer 2

CSS从上到下阅读。低于其他css的所有内容都会覆盖其上的内容。但是，可以在CSS参数的末尾使用!important来覆盖其他所有内容

body{
    background-color: black !important;
}

body{
    background-color: pink;
}

背景颜色为黑色。如果删除！important，它将是粉红色。

Answer 3

媒体查询与样式表的其余部分级联。您可以在样式表中散布媒体查询，因此您也可以根据需要级联样式。

例如：

.my-class {
    color: red;
}

.my-class--modifier {
    color: blue;
}

@media screen and (min-width: 760px) {
    .my-class--modifier {
        color: green;
    }
}

.some-other-class {
    width: 200px;
}

@media screen and (min-width: 760px) {
    .some-other-class {
        width: 700px;
        background-color: gray;
    }
    .some-other-class .my-class {
        border: 2px solid red;
        border-radius: 4pt;
    }
}

这正是由于CSS的级联性质。您可以根据部分，个人选择器等组织媒体查询。

Answer 4

基本上，当您要根据设备的常规类型（例如打印与屏幕），特定特征（例如浏览器视口的宽度或环境（例如环境光））应用CSS样式时，您正在使用媒体查询条件）。

当您开始设计时，通常会开始为一个已知规格的设备进行设计。因此，您可以根据当前设备进行设计，然后将其应用于其他屏幕尺寸。

因此订单如下：完成设计 - ＆gt;在底部添加媒体查询以适合所需的屏幕尺寸。

Answer 5

最好将查询写在优先级最高的底部。这将使您免于使用重要的压力！每次。

为什么我必须将媒体查询放在样式表的底部？

5 个答案: