媒体查询仅对部分CSS属性生效问题求助

看起来你碰到了媒体查询里部分属性死活不生效的糟心事——别慌，这在CSS里太常见了，咱们从最可能的原因开始排查：

1. 最大概率：CSS选择器权重不够 #

你那些生效的属性（比如display: none、background-color）和不生效的（width、background），很大可能是因为全局样式里的选择器权重比媒体查询里的高。

举个例子：如果你的全局样式里写的是main .top .top-left { width: 50%; }，但媒体查询里只写了.top-left { width: 20%; }，那全局的权重更高，媒体查询的width就会被覆盖。

测试&解决办法： #

• 先给不生效的属性加!important临时验证：比如width: 20% !important;，如果生效了，实锤就是权重问题。
• 不要一直依赖!important，最好的办法是让媒体查询里的选择器权重和全局样式一致或更高。比如全局用main .top .top-left，媒体查询里也用完全相同的层级：

@media (min-width: 375px) and (max-width: 768px){
  main{
    .top{
      .top-left{
        width: 20%; // 现在权重匹配，会生效
        background-color: white;
        align-items: center;
        .top-left-content{
          margin-left: 0px;
        }
      }
    }
  }
}

2. 属性本身的坑：复合属性vs单一属性 #

你注意到没？生效的是background-color，不生效的是background:white;——这俩有区别：

• background是复合属性，它会一次性覆盖背景颜色、图片、定位等所有背景相关设置。如果全局样式里的background用了更高权重的设置，或者包含了其他属性（比如background: #eee url(img/bg.png)），那媒体查询里的background:white可能因为权重不够被覆盖。
• background-color是单一属性，只会修改背景颜色，不容易被复合属性直接覆盖（除非权重不够）。

另外，width属性如果遇到flex布局也容易失效：如果.top是flex容器，那.top-left的width可能需要用flex: 0 0 20%;来代替单纯的width，才能强制生效。

3. 最后检查：viewport设置 #

如果你的页面没加viewport meta标签，平板浏览器会把页面模拟成桌面宽度（比如980px），导致你的媒体查询（375px-768px）根本没触发！

赶紧在HTML的<head>里加上：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

给你的针对性修改示例 #

结合上面的点，调整后的媒体查询代码大概是这样：

@media (min-width: 375px) and (max-width: 768px){
  main .top .top-right{
    display: none;
  }
  main .top .top-left{
    background-color: white;
    width: 20%; /* 现在权重匹配，生效 */
    align-items: center;
    .top-left-content{
      margin-left: 0px;
    }
  }
  main .top .bottom{
    background-color: white; /* 用单一属性代替复合属性 */
    .bottom-left{
      display: none;
      width: 100%;
      background-color: red;
    }
  }
}

先按这个思路排查，应该能解决大部分问题~

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