我的媒體查詢在CSS中不起作用，似乎無法識別

Question

我正在嘗試使@media在我的CSS上工作，但似乎不起作用。

在我的HTML代碼的<head>中，我有：

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

在我的style.css中：

.sidebar {
    grid-area: sidebar;
    background: #2e2c2c;
}

（我精確地顯示了我的.sidebar：默認為阻止）
接着：

@media screen and (max-width: 1366px) {
    .sidebar {
        display: none;
    }
  }

我希望顯示.sidebar：沒有像我寫的那樣顯示，但是仍然顯示：block，並且在檢查器中，我沒有看到任何媒體查詢的痕跡。
我在瀏覽器上嘗試模擬一個小於1366px的大窗口，並模擬了電話屏幕，但沒有任何效果。

Answer 1

您的代碼中有一個特殊字符，導致出現問題，這是示例中的相同代碼，其中刪除了媒體查詢中的隱藏特殊字符。 特殊字符在max-width:和1366px之間的空格中。

 .sidebar { grid-area: sidebar; background: #2e2c2c; color: white; } main { display: none; } @media screen and (max-width: 1366px) { .sidebar { display: none; } main { display: block; } }

 <div class="sidebar">Sidebar</div> <main>Main</main>

我的媒體查詢在CSS中不起作用，似乎無法識別

問題描述

1 個解決方案

解決方案1
0 已采納 2019-09-11 00:26:14

我的媒體查詢在CSS中不起作用，似乎無法識別

問題描述

1 個解決方案

解決方案1 0 已采納 2019-09-11 00:26:14

解決方案1
0 已采納 2019-09-11 00:26:14