网站自适应布局求助：移动端缩放时实现区块向下排列

嘿，别担心英文表达的问题～我来帮你搞定这个移动端响应式布局的需求！

你现在遇到的情况是：页面区块在屏幕缩小时只会横向收窄，没有自动切换为垂直排列——这本质是缺少响应式断点设置，没有告诉浏览器“当屏幕小到某个程度时，改变区块的排列方向”。

下面给你两种最常用的解决方案，任选其一就能实现你想要的效果：

方案1：使用Flexbox（最灵活的横向转纵向方案） #

Flexbox是实现响应式布局的首选工具之一，只需两步就能搞定：

步骤1：基础横向布局设置 #

先给区块容器设置Flex布局，让区块默认横向排列：

<!-- 你的HTML结构示例 -->
<div class="section-container">
  <div class="content-block">区块1</div>
  <div class="content-block">区块2</div>
  <div class="content-block">区块3</div>
</div>

/* 默认桌面端样式 */
.section-container {
  display: flex;
  gap: 1.5rem; /* 区块之间的间距，可自定义 */
  padding: 1rem;
}

.content-block {
  flex: 1; /* 让所有区块平分容器宽度 */
  padding: 2rem;
  background-color: #f5f5f5;
  border-radius: 8px;
}

步骤2：添加移动端断点 #

用@media查询设置屏幕阈值（比如768px，是移动端常见的断点），当屏幕宽度小于这个值时，强制容器切换为纵向排列：

/* 移动端适配：屏幕宽度≤768px时生效 */
@media (max-width: 768px) {
  .section-container {
    flex-direction: column; /* 从横向排列改为纵向排列 */
  }
}

方案2：使用Grid（适合规整的多列布局） #

如果你的区块是规整的多列布局，Grid会更直观：

/* 默认桌面端样式：3列平分宽度 */
.section-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  padding: 1rem;
}

.content-block {
  padding: 2rem;
  background-color: #f5f5f5;
  border-radius: 8px;
}

/* 移动端适配：切换为单列 */
@media (max-width: 768px) {
  .section-container {
    grid-template-columns: 1fr;
  }
}

• 你可以根据自己的设计需求调整断点宽度（比如改成480px适配小屏手机）；
• 如果你的原有代码里已经有容器样式，只需要把上述的Flex/Grid设置和媒体查询加进去即可；
• 记得测试不同屏幕尺寸的效果，确保区块在纵向排列时的间距、内边距等样式符合预期。

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