响应式布局在移动端显示错乱怎么办？

司马诗辰提问于 2026-03-03 17:23:20 阅读 48

组件

我用 CSS Grid 做了个两栏布局，PC 上看着没问题，但一到手机上右边栏就跑到下面去了，还特别宽。明明写了媒体查询，但好像没生效？

试过把 grid-template-columns: 1fr 300px 改成 1fr，但还是不对。是不是我断点写错了？

@media (max-width: 768px) {
  .container {
    grid-template-columns: 1fr;
  }
}

布局组件

我来解答赞 15 收藏

反馈

2 条解答

Code°景叶 Lv1

问题应该出在媒体查询的断点设置或者样式优先级上。首先检查一下是否在其他地方覆盖了这个媒体查询里的样式？有时候全局样式或者内联样式的优先级会更高。

其次，确保媒体查询语法正确，并且浏览器支持CSS Grid。虽然现在大多数现代浏览器都支持，但为了保险起见，可以查一下兼容性。

最后，试试在媒体查询里加个 !important 来提高优先级，看看会不会生效，如果生效了，说明就是样式被覆盖了。不过长期这样用可能不太好，还是要找根本原因。

@media (max-width: 768px) {

  .container {

    grid-template-columns: 1fr !important;

  }

}

如果以上都不行，可能是HTML结构或者外部因素影响了布局，比如父元素的宽度限制或者浮动元素没有清除等。检查一下这些方面，问题应该就能解决了。

2026-03-21 15:03

司马柯欣 Lv1

大概率是右边栏原本的固定宽度或者 min-width 没被覆盖掉，直接在媒体查询里把它设成 100%。

@media (max-width: 768px) {

  .container {

    grid-template-columns: 1fr;

  }

  .sidebar {

    width: 100%;

    box-sizing: border-box;

  }

}

2026-03-03 23:04