html - 媒体查询未显示在 chrome 检查工具中，仅使用此特定代码。这是什么原因造成的？

Question

但问题只出在这个特定的代码上。我使用了很多其他代码作为示例，并且确实显示了 Media Query。

但问题只出在这个特定的代码上。我使用了很多其他代码作为示例，并且确实显示了 Media Query。

如何让它显示出来，以便我可以从那里编辑它？

body {
  background: #eee;
  font-family: 'Lato', sans-serif;
}

.nav-link {
  position: relative;
  float: right;
  padding: 24px 40px 15px 20px;
}

#header {
  overflow: hidden;
}

@media (max-width: 410px) {
  #nav-bar {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    text-align: center;
    margin-top: 30px;
    padding: 0 50px;
  }
}

<header id="header">


  <nav id="nav-bar">

    <div class="nav-link">Pricing</div>
    <div class="nav-link">How It Works</div>
    <div class="nav-link">Features</div>

  </nav>

</header>

标签： htmlcss

Answer 1

尝试将您的媒体查询语法更新为：

 @media screen and (max-width: 410px) {
      // Code goes here
 }