CSS媒体查询不适用于特定的div？

Question

为了确保媒体查询确实有效并且问题不是我设置了错误的最大宽度，我将导航栏设置为在达到最大宽度时更改颜色和高度。我的主要目标是让搜索栏进一步向左移动，但这不起作用（背景颜色的变化是出于视觉目的）。为什么会这样？我正在尝试重新定位搜索栏，因为一旦屏幕变小它就会出现故障。

nav ul {
  display: inline-flex;
  list-style: none;
  transform: translate(16%);
}

nav ul li {
  margin-right: 50px;
}

.search {
  border-radius: 40px;
  background-color: rgb(255, 255, 255);
  display: inline-flex;
  height: 35px;
  transform: translate(180px, -1px);
}

.search input {
  position: relative;
  left: 10px;
  top: 0px;
  outline: none;
  width: 0px;
  border: none;
  background: transparent;
  transition: 0.5s;
}

search:hover input {
  width: 150px;
}

.btn {
  height: 35px;
  width: 35px;
  border-radius: 35px;
  background-color: lightseagreen;
}

.btn i {
  position: Relative;
  top: 9px;
  left: 9px;
}

@media screen and (max-width: 1380px) {
  nav {
    background-color: greenyellow;
    height: 40px;
  }
  .search {
    background-color: indigo;
  }
}

<nav>
  <ul>
    <li><a href=#>word1</a></li>
    <li><a href=#>word2</a></li>
    <li><a href=#>word3</a></li>
  </ul>
  
  <div class="search">
    <input type="text" placeholder="search">
    <div class=btn>
      <i class="fas fa-search"></i>
    </div>
  </div>
</nav>

Answer 1

您的媒体查询按预期工作：background-colors 已应用，height 已设置。 .search 的 background-color 不太明显，因为搜索输入有一个 width: 0px - 因此我使用 50px 进行了测试。 height 的变化不可见，因为一切都是白色的 - 因此我测试了：

nav {
  background-color: #ccc;
}

现在您可以看到，在大屏幕上导航没有 height (= auto)，在小屏幕上 40px（使用浏览器开发工具）。

工作示例：

nav {
  background-color: #ccc;
}

nav ul {
  display: inline-flex;
  list-style: none;
  transform: translate(16%);
}

nav ul li {
  margin-right: 50px;
}

.search {
  border-radius: 40px;
  background-color: lightcoral;
  display: inline-flex;
  height: 35px;
  transform: translate(180px, -1px);
}

.search input {
  position: relative;
  left: 10px;
  top: 0px;
  outline: none;
  width: 0px;
  border: none;
  background: transparent;
  transition: 0.5s;
}

.search:hover input {
  width: 150px;
}

.btn {
  height: 35px;
  width: 35px;
  border-radius: 35px;
  background-color: lightseagreen;
}

.btn i {
  position: Relative;
  top: 9px;
  left: 9px;
}

@media screen and (max-width: 1380px) {
  nav {
    background-color: greenyellow;
    height: 40px;
  }
  .search {
    background-color: indigo;
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet">

<nav>
  <ul>
    <li><a href=#>word1</a></li>
    <li><a href=#>word2</a></li>
    <li><a href=#>word3</a></li>
  </ul>

  <div class="search">
    <input type="text" placeholder="search">
    <div class=btn>
      <i class="fas fa-search"></i>
    </div>
  </div>
</nav>

---

替代示例：

display: flex 用于整个 nav 容器，transform 用于媒体查询中的ul

nav {
  display: flex;
  justify-content: space-between;
  background-color: #ccc;
}

nav ul {
  display: inline-flex;
  list-style: none;
  transform: translate(16%);
}

nav ul li {
  margin-right: 50px;
}

.search {
  border-radius: 40px;
  background-color: lightcoral;
  display: inline-flex;
  height: 35px;
}

.search input {
  position: relative;
  left: 10px;
  top: 0px;
  outline: none;
  width: 0px;
  border: none;
  background: transparent;
  transition: 0.5s;
}

.search:hover input {
  width: 150px;
}

.btn {
  height: 35px;
  width: 35px;
  border-radius: 35px;
  background-color: lightseagreen;
}

.btn i {
  position: Relative;
  top: 9px;
  left: 9px;
}

@media screen and (max-width: 1380px) {
  nav {
    background-color: greenyellow;
    height: 40px;
  }
  
  nav ul {
    transform: none;
  }
  
  .search {
    background-color: indigo;
  }
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet">

<nav>
  <ul>
    <li><a href=#>word1</a></li>
    <li><a href=#>word2</a></li>
    <li><a href=#>word3</a></li>
  </ul>

  <div class="search">
    <input type="text" placeholder="search">
    <div class=btn>
      <i class="fas fa-search"></i>
    </div>
  </div>
</nav>

Answer 2

如果它不适用于所有 div，请检查您是否忘记将 <meta content="width=device-width, initial-scale=1" name="viewport" /> 放在您的 HTML 代码所在的 <head> </head> 标记中。这应该可以解决问题。