屏幕缩小时H标签与列对齐问题的CSS修复求助

核心需求 #

• 文字随屏幕尺寸缩小自动适配缩放
• H标签始终位于对应列的上方并保持居中
• 列优先保持横向排列，空间不足时自动换行且整体居中

原代码 #

HTML

<div class="encompasing-div-class">
  <h5>Small Tag</h5>
  <div class="row">
    <h3 class="mobile-only">column tag</h3>
    <div class="column">
      <ul>
        <li> things</li>
        <li> things </li>
      </ul>
    </div>
    <div class="column">
      <h3 class="mobile-only">column tag</h3>
      <ul>
        <li> more things </li>
        <li> more things </li>
      </ul>
    </div>
 </div>
</div>

CSS

.row{ 
   text-align: center;
   font-size: .8rem;
}

.column{
   justify-content: center;
   text-align: center;
   font-size: .8rem;
}

解决方案 #

以下是针对需求的优化CSS代码，关键调整点说明：

1. 文字自适应缩放：使用clamp()函数结合视口单位vw，实现字体大小在指定范围内随屏幕宽度动态调整，兼顾不同设备的可读性。
2. Flexbox布局优化：给.row设置Flex布局，通过flex-wrap: wrap实现列的自动换行，justify-content: center确保换行后列居中；给.column设置最小宽度，避免过早换行。
3. H标签定位与居中：确保所有H标签继承居中样式，.mobile-only标签默认显示（可根据需求通过媒体查询控制移动端显示），并保持在列内容上方。

修改后的CSS：

/* 容器基础样式 */
.encompasing-div-class {
  text-align: center; /* 确保顶部h5居中 */
}

.row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem; /* 列之间的间距，可调整 */
  font-size: clamp(0.7rem, 2vw, 0.9rem); /* 文字自适应缩放 */
}

.column {
  flex: 0 1 250px; /* 最小宽度250px，空间充足时自动扩展 */
  text-align: center;
  font-size: inherit; /* 继承row的字体大小，保持统一 */
}

/* H标签样式 */
.encompasing-div-class h5 {
  font-size: clamp(0.8rem, 2.5vw, 1rem);
  margin-bottom: 1rem;
}

.column .mobile-only,
.row .mobile-only {
  font-size: clamp(0.9rem, 3vw, 1.2rem);
  margin-bottom: 0.8rem;
}

/* 列表样式优化 */
.column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

补充说明 #

• clamp(min, preferred, max)：第一个值是最小字体大小，第二个是基于视口的动态值，第三个是最大字体大小，可根据实际需求调整数值。
• flex: 0 1 250px：表示列不会放大，允许缩小，最小宽度250px，可根据布局需求修改这个最小宽度，控制换行的时机。
• 如果.mobile-only仅需要在移动端显示，可添加媒体查询：

  @media (min-width: 768px) {
    .mobile-only {
      display: none;
    }
  }
  

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