@media查询不生效，column类div无法按响应式规则调整宽度求助

DevOps 小满

2026-10-1

问题原因

原生CSS不支持将@media规则嵌套在普通选择器内部，你当前把媒体查询写在了.column选择器的花括号里，浏览器会直接忽略这段不合法的规则，导致断点触发后样式不生效。只有Sass、LESS等CSS预处理器才支持这种嵌套写法，纯CSS文件必须将媒体查询写在全局层级。

修正后的CSS代码

/* 屏幕宽度小于700px时的默认样式 */
.column{
  background-color: #FFF;
  padding-top: 0%;
  padding-bottom: 0%;
  margin-top: 1.2%;
  margin-left: 37.5%;
  margin-right: 2%;
  width: 25%;
  text-align: center;
  display: inline-block;
}

/* 屏幕宽度≥700px时生效的规则，必须写在全局层级 */
@media (min-width: 700px) {
  .column {
    background-color: #FFF;
    padding-top: 0%;
    padding-bottom: 0%;
    margin-top: 1.2%;
    margin-left: 1%;
    margin-right: 1%;
    width: 98%;
    text-align: center;
    display: inline-block;
  }
}