Question

我正在尝试使@media在我的CSS上运行，但似乎不起作用。

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

<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，在检查器中，我没有看到任何媒体查询的痕迹。
我尝试在浏览器中使用小于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>

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

1 个答案: