媒体查询@media (min-width:1280px)失效，1920*1080导航不显示

需求为仅在屏幕宽度大于1280px时显示导航菜单，小于等于1280px时隐藏header .navigation。但1920*1080（宽度>1280px）的设备上导航依然不显示，移除媒体查询直接写样式则正常显示。

原错误代码 #

@media only screen and (min-width: 100px) and (max-width: 260px) {
  header .navigation {
  display: none;
  }
  @media only screen and (min-width: 260px) and (max-width: 350px) {
  header .navigation {
  display: none;
  }
  @media only screen and (min-width: 370px) and (max-width: 500px) {
  header .navigation {
 display: none;
}
@media only screen and (min-width: 500px) and (max-width: 1280px) {
header .navigation {
display: none;
}
@media only screen and (min-width: 350px) and (max-width: 370px) {
header .navigation {
display: none;
}
@media screen and (min-width: 1280px){
header .navigation{
height:3em;
position: relative;
background:  dark orange ;
width:98em;
top:50;
left:-12em;
font-size:30px;
font-color: dark orange;
font-family: Meow Script;
padding:20px;
}
header .navigation .navigation-items a{
 font-family: Meow Script;
  position: relative;
  background: dark red;
  color: white;
  font-size: 3em;
  font-weight: 500;
  width:100px;
  font-size:20px;
  text-decoration: none;
  margin-left: 15px;
  transition: 0.3s ease;
  left :15em;
  padding: 15px 40px;
  border-radius:150px;
  font-family: Meow Script;
  }
  header .navigation .navigation-items a span{
  border-radius:50px;
  width:100px;
  font-family: Meow Script;
  font-size: 1.2em;
  }
  header .navigation .navigation-items a:before{
   content: '';
   position: absolute; 
   font-family: Meow Script;
   width: 0;
   height: 3px;
   bottom: 0;
   left: 0;
   transition: 0.3s ease;
  }
  header .navigation .navigation-items a:hover:before{
  width: 100%;
  }
  }

问题原因 #

1. 媒体查询嵌套错误：CSS不允许媒体查询互相嵌套，原代码将多个@media规则嵌套在其他@media内部，导致浏览器无法正确解析所有规则，包括针对>1280px的显示样式也失效。
2. 规则冗余且逻辑混乱：拆分多个区间设置隐藏的写法繁琐，还可能因区间衔接的优先级问题，干扰正确规则的生效。
3. 语法细节错误：存在font-color（应为color）、top:50（缺少单位）等无效写法，影响样式正常渲染。

修复方案 #

简化逻辑：先默认隐藏导航，再针对屏幕宽度≥1280px的情况覆盖显示并设置样式，彻底避免嵌套和冗余问题。

修复后的代码 #

/* 默认隐藏导航，所有小于1280px的屏幕自动应用 */
header .navigation {
  display: none;
}

/* 仅屏幕宽度≥1280px时，显示导航并设置样式 */
@media screen and (min-width: 1280px) {
  header .navigation {
    display: block; /* 显示导航 */
    height: 3em;
    position: relative;
    background: darkorange; /* 修正空格问题，或用"dark orange" */
    width: 98em;
    top: 50px; /* 添加单位 */
    left: -12em;
    font-size: 30px;
    color: darkorange; /* 替换无效的font-color */
    font-family: 'Meow Script', cursive; /* 特殊字体名称加引号更兼容 */
    padding: 20px;
  }

  header .navigation .navigation-items a {
    font-family: 'Meow Script', cursive;
    position: relative;
    background: darkred;
    color: white;
    font-size: 20px; /* 移除重复的font-size设置 */
    font-weight: 500;
    width: 100px;
    text-decoration: none;
    margin-left: 15px;
    transition: 0.3s ease;
    left: 15em;
    padding: 15px 40px;
    border-radius: 150px;
  }

  header .navigation .navigation-items a span {
    border-radius: 50px;
    width: 100px;
    font-family: 'Meow Script', cursive;
    font-size: 1.2em;
  }

  header .navigation .navigation-items a:before {
    content: '';
    position: absolute;
    width: 0;
    height: 3px;
    bottom: 0;
    left: 0;
    transition: 0.3s ease;
    background: white; /* 添加背景色，hover时才能看到下划线 */
  }

  header .navigation .navigation-items a:hover:before {
    width: 100%;
  }
}

关键说明 #

• 先设默认隐藏，再通过媒体查询覆盖显示，逻辑清晰无嵌套错误。
• 修正了所有语法细节问题，确保样式正常渲染。
• 移除重复代码，优化结构可读性。

内容的提问来源于stack exchange，提问作者Udayarajan gauthaman