媒體查詢 CSS 覆蓋 CSS 而不滿足寬度條件

Question

我有這個 css：

.realiser-devis { 文本轉換：大寫； 字體大小：23px； 字體粗細：700； 邊距：0； 顏色：#fff; }

如果屏幕寬度小於 1600 像素，我想減小字體大小

@media only screen and  (max-width:1600px) {
        .realiser-devis {
            font-size: 12px;
        }
        
    }

問題是媒體查詢中的 css 在不滿足條件的情況下工作； 我的屏幕寬度為 1800 像素，字體大小為 12 像素

有什么我想念的嗎？

問候

阿米爾

Answer 1

確保你在<head>部分有這個：

<meta name="viewport" content="width=device-width, initial-scale=1">

Answer 2

檢查時請在控制台中使用此命令檢查屏幕寬度

console.log(window.screen.width)

如果它仍然是 1800，請將您的媒體查詢max-width減少到 500 並檢查，如果它有效，那么您應該檢查您的屏幕寬度有什么問題。

否則，請嘗試使用媒體查詢，而不關鍵字only （它會影響老版本瀏覽器）：

@media screen and  (max-width:1600px) {
    .realiser-devis {
        font-size: 12px;
    }
}

Answer 3

<meta name="viewport" content="width=device-width, initial-scale=1">