html - 为什么这个媒体查询不否决主 CSS

Question

我不知道，为什么这个媒体查询没有:

@media only screen and (max-width: 1200px){

    .hero-text-box {
        width: 100%;
        padding: 0 2%; 
    }   
}

不会否决标准样式的 css 女巫看起来像这样

.hero-text-box {
    position: absolute;
    width: 1140px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

当我在屏幕尺寸低于 1200 像素时查看 google chrome 开发者工具时，填充有效，但不是 100% 宽度。 IT只是交叉了。

Answer 1

重要的是这些规则在您的 CSS 中出现的顺序。您应该将媒体查询规则放在常规规则之下:

.hero-text-box {
    position: absolute;
    width: 1140px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

@media only screen and (max-width: 1200px){
    .hero-text-box {
        width: 100%;
        padding: 0 2%; 
    }   
}

如果这些规则位于单独的文件中，请确保在具有常规样式的文件之后包含带有媒体查询的文件。