如何用CSS创建响应式导航栏？@media查询样式调整失效求助

你的代码存在几个关键问题，导致媒体查询的样式没达到预期：

1. 未给.navbar设置display: flex #

flex-direction: column是Flex布局专属属性，只有元素设置display: flex（或inline-flex）时才会生效。默认块级元素的display为block，这个属性不会起作用。

2. height: 100%依赖父元素高度 #

设置height: 100%时，必须确保.navbar的所有父元素（比如<html>、<body>）都有明确高度，否则百分比高度无法被正确计算。

修复后的代码 #

/* 给html和body设置高度，确保子元素百分比高度生效 */
html, body {
  height: 100%;
  margin: 0; /* 清除默认边距，避免不必要的滚动条 */
}

.navbar {
  height: 60px;
  background-color: #333;
  display: flex; /* 启用Flex布局 */
  /* 可选：添加对齐方式优化导航项布局 */
  align-items: center;
  justify-content: space-around;
}

@media (max-width: 600px) {
  .navbar {
    height: 100%;
    flex-direction: column;
    /* 可选：小屏幕下调整垂直分布逻辑 */
    justify-content: flex-start;
    padding-top: 10px;
  }
}

额外检查点 #

• 确认媒体查询语法无误：你的(max-width: 600px)写法正确，但要避免拼写错误（比如漏写括号、单位错误）。
• 检查样式优先级：如果有其他针对.navbar的样式写在媒体查询之后，会覆盖当前设置，确保媒体查询位于基础样式之后。
• 用浏览器开发者工具的响应式模式测试，或手动缩小窗口到600px以下验证效果。

内容的提问来源于stack exchange，提问作者Connor Chase