为什么我必须将媒体查询放在样式表的底部？ [英] Why do I have to put media queries at the bottom of the stylesheet?

问题描述

我是新的学习响应式设计。我在旅途中注意到的是，当我把媒体查询放在样式表的底部时，一切都完美无瑕地关于断点。如果我把媒体查询放在样式表的顶部，没有什么工作，只是最近我发现我需要添加！important和max-DEVICE-width（相对于max-width）到被改变的CSS 。

I am new learning responsive design. What I have noticed on my journey is that when I put media queries at the bottom of the stylesheet, everything works flawlessly in regards to breakpoints. If I put the media queries at the top of the stylesheet, nothing works, and only recently I found out that I need to add !important and max-DEVICE-width ( as opposed to max-width) to the css that is being changed.

为什么？为什么当放在样式表的底部时，媒体查询在桌面和移动设备上都可以正常工作。

Why is this? Why do the media queries work on both desktop and mobile when put at the bottom of the stylesheet.

为什么当我将媒体查询放在样式表的顶部时，我需要添加！important和maximum- DEVICE -width为了让断点在桌面和移动设备上正常工作？

Why is it that when I put media queries on the top of the stylesheet I need to add !important and also max-DEVICE-width in order for the breakpoints to work on desktop and mobile?

推荐答案

因为css是从上到下阅读的。

Because css is read from top to bottom. The rule that is set last, is the one that will be executed.

翻译，如下所示：

@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....
}

这篇关于为什么我必须将媒体查询放在样式表的底部？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！