如何在手机端将div布局调整为1列或2列？

核心思路 #

通过CSS媒体查询（@media）针对屏幕宽度≤480px的移动端场景，使用Grid布局快速调整列数，实现1列或2列的响应式效果。

1. 实现1列布局 #

合并重复的媒体查询规则，让代码更简洁，同时确保容器宽度适配移动端：

@media only screen and (max-width: 480px) {
  /* 控制行列的容器 */
  .wrapper {
    display: grid;
    grid-template-rows: 25% 20% 15% 15%;
    grid-template-columns: 1fr; /* 单列布局 */
    max-width: 95%;
  }

  /* 顶部文本容器 */
  .content {
    display: grid;
    grid-template-columns: 1fr; /* 单列布局 */
    min-width: 95%;
  }
}

2. 实现2列布局 #

如果需要改成2列，只需把对应的grid-template-columns值改为1fr 1fr（均分两列）即可：

@media only screen and (max-width: 480px) {
  .wrapper {
    display: grid;
    grid-template-rows: 25% 20% 15% 15%;
    grid-template-columns: 1fr 1fr; /* 两列均分 */
    max-width: 95%;
  }

  .content {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 两列均分 */
    min-width: 95%;
  }
}

注意事项 #

• 若子元素数量超过列数，Grid会自动换行到下一行，保持布局规整；
• 如果需要自定义列宽比例，可将1fr替换为具体数值（如200px）或比例值（如2fr 1fr）。

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