平板与桌面端视图下@media媒体查询不生效问题求助

核心问题 #

• 断点逻辑和移动端优先的开发原则冲突：你当前写的平板适配规则是max-width: 768px，意思是只有屏幕宽度≤768px时才会生效，这个区间和你默认的手机端样式区间完全重叠，同权重下先写的手机端样式会覆盖媒体查询内的规则，自然看不到效果。同时769px-1499px的平板/小屏桌面区间没有任何适配规则，宽度在这个区间的设备不会触发你写的任何媒体查询。
• 可能存在放置顺序错误：如果你将媒体查询代码放在了默认手机端样式的前面，CSS的层叠规则会让后面的默认样式覆盖媒体查询内的样式。
• 可能存在选择器权重不足/不匹配的问题：如果默认手机端样式里针对同一个元素的选择器权重比媒体查询内的高，媒体查询的规则会被覆盖；另外你原代码中h1 .section-title的写法带了空格，代表选中h1后代的.section-title元素，如果是h1元素自身带有section-title类，这个选择器根本无法命中元素，规则自然不生效。

解决办法 #

1. 修正媒体查询的断点逻辑，适配移动端优先的开发模式，修改后的参考代码如下：

/* 原有默认的手机端样式全部放在最前面 */

/* 平板适配：覆盖768px-1499px区间 */
@media only screen and (min-width: 768px) and (max-width: 1499px) {
  .cta {
    font-size: 2.5rem;
    padding: 20px 60px;
  }
  /* 根据实际元素结构调整选择器，是后代就保留空格，是自身带类就去掉空格 */
  h1.section-title {
    font-size: 6rem;
  }

  /* hero section */
  #hero h1 {
    font-size: 7rem;
  }
  /* end of hero section */

  /* service section */
  #services .service-bottom .services-item {
    flex-basis: 45%;
    margin: 2.5%;
  }
  /* end of service section */
}
/* end of media query for tablet */

/* 桌面端适配：覆盖≥1500px区间 */
@media only screen and (min-width: 1500px) {
  /* header */
  #header .hamburger {
    display: none;
  }
  /* end of header */
}
/* end of media query for desktop */

2. 确认所有媒体查询代码都放在默认手机端样式的后面，保证层叠顺序正确。
3. 打开浏览器开发者工具，选中不生效的元素，查看样式面板中媒体查询的规则是否被划掉，如果是说明权重不足，将媒体查询内的选择器写得和默认样式的选择器完全一致即可。

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