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

Question

I am trying to make the @media working on my CSS but it doesn't seem to work. 我正在尝试使@media在我的CSS上工作，但似乎不起作用。

In the <head> of my HTML code, I have : 在我的HTML代码的<head>中，我有：

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

In my style.css : 在我的style.css中：

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

(I precise that my .sidebar is display: block by default) （我精确地显示了我的.sidebar：默认为阻止）
And then : 接着：

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

I expect my .sidebar to be display: none like I wrote, but it still display: block and in the inspector, I didn't see any traces of media query. 我希望显示.sidebar：没有像我写的那样显示，但是仍然显示：block，并且在检查器中，我没有看到任何媒体查询的痕迹。
I tried with a window smaller than 1366px large on my browser and by emulating the phone screen, but nothing works. 我在浏览器上尝试模拟一个小于1366px的大窗口，并模拟了电话屏幕，但没有任何效果。

Answer 1

You have a special character in your code causing issues, here is the same code from your example with the hidden special character in the media query removed. 您的代码中有一个特殊字符，导致出现问题，这是示例中的相同代码，其中删除了媒体查询中的隐藏特殊字符。 The special character is in the space between max-width: and 1366px . 特殊字符在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