CSS 媒體查詢不適用於任何瀏覽器

Question

我查看了每個線程，並嘗試了所有可能的解決方案，但均無濟於事。 它在任何瀏覽器上都不起作用......

HTML

<html>
<head>
    <link type="text/css" rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"/>
</head>
<body>
    <div class="bg">
    </div>
    
</body>

CSS：

    @media only screen and (max-width: 1200){
    .bg{
        background-color: green;
    }
}

*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

.bg{
    background-color: black;
    height: 100vh;   
}

有什么建議么？

Answer 1

您有 2 個問題阻止它工作：

您需要在(max-width: 1200px)中指定單位（例如 px） - 否則無法識別斷點
您需要在.bg的默認 css之后包含媒體查詢。 因為您在.bg{background-color: black;...}之前包含媒體查詢，所以這會覆蓋設置為綠色的媒體查詢中的 CSS 規則。

在工作片段中查看此內容（單擊“擴展片段”以全屏黑色背景查看）：

 * { box-sizing: border-box; padding: 0; margin: 0; }.bg { background-color: black; height: 100vh; } @media only screen and (max-width: 1200px) {.bg { background-color: green; } }

 <div class="bg"> </div>

Answer 2

您應該在媒體查詢中使用min-width並使用移動優先方法應用它們。 這意味着首先您應用默認的 styles 如果沒有媒體查詢，它將應用於任何屏幕。 然后你重置 styles 以獲得更大的屏幕尺寸。 默認的 styles 僅適用於較小的屏幕。

例子：

/* Default style */
.sample-class {
  color: #ff0000;
}

/* Reset style for screen sizes that are 768px or higher */
@media screen and (min-width: 768px) {
  .sample-class {
    color: #777777;
  }
}

請確保您按上述順序實施 styles。

CSS 媒體查詢不適用於任何瀏覽器

問題描述

2 個解決方案

解決方案1
2 2020-07-29 16:30:41

解決方案2
0 2020-07-29 16:31:47

CSS 媒體查詢不適用於任何瀏覽器

問題描述

2 個解決方案

解決方案1 2 2020-07-29 16:30:41

解決方案2 0 2020-07-29 16:31:47

解決方案1
2 2020-07-29 16:30:41

解決方案2
0 2020-07-29 16:31:47