爲什麼沒有這個媒體查詢否決主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%; 
    } 
}