为什么没有这个媒体查询否决主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%); 
} 

当我看到谷歌铬的开发工具，当屏幕尺寸低于1200px时，填充工作，但不是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%; 
    } 
}