html - 我的媒体查询在 CSS 中不起作用，它似乎无法识别

Question

我试图让@media 在我的 CSS 上工作，但它似乎不起作用。

在我的 HTML 代码的 中，我有:

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

在我的 style.css 中:

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

(我明确我的 .sidebar 是 display: block by default)
然后:

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

我希望我的 .sidebar 像我写的那样显示:无，但它仍然显示: block 并且在检查器中，我没有看到任何媒体查询的痕迹。
我尝试在浏览器上使用小于 1366 像素的大窗口并模拟手机屏幕，但没有任何效果。

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>