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%);
}

当我在屏幕尺寸低于1200px时查看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%; 
    }   
}

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

Answer 2

我认为您应该尝试将媒体查询规则放在一般规则之后。

.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%; 
    }   
}

为什么此媒体查询不会取代主要的CSS

2 个答案: