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

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

组件

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

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

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

布局组件

我来解答赞 4 收藏

反馈

1 条解答

司马柯欣 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