如何用W3.CSS实现响应式文本大小？小屏适配需求

首先得提个小细节：你的代码里有个标签闭合错误——第一个<h2 id="date1">用了</h3>收尾，记得改成</h2>，不然会影响页面的正常渲染哦。

回到你的问题：W3.CSS本身没有内置的直接方案能让<h3>标签在小屏设备自动切换成<h4>/<h5>的字号（毕竟h标签的样式是固定的层级），不过我们可以用两种优雅的方式解决，完全避开你不想用的vw和重复内容方案：

方案1：用W3.CSS文本样式类替代h标签（贴合框架风格） #

W3.CSS提供了对应h1-h6的文本类（比如w3-h3、w3-h4），我们可以自定义一个类，结合框架的响应式断点来切换字号：

<table class="w3-table">
  <tr>
    <td>
      <h2 id="date1"><b>title1</b></h2> <!-- 先修复标签闭合问题 -->
    </td>
    <td class="w3-black w3-center custom-header">title2</td>
    <td class="w3-center custom-header">title3</td>
    <td class="w3-center custom-header">title4</td>
    <td class="w3-center custom-header">title5</td>
  </tr>
</table>

然后添加少量自定义CSS，复用W3.CSS的官方断点（小屏断点为max-width: 600px）：

/* 默认使用h3的字号，和W3.CSS原生样式对齐 */
.custom-header {
  font-size: 24px;
  font-weight: bold;
}

/* 小屏设备下切换为h4的字号 */
@media screen and (max-width: 600px) {
  .custom-header {
    font-size: 20px;
  }
}

这种方式既贴合W3.CSS的设计逻辑，又不用重复写内容，完美避开vw的问题。

方案2：直接给h3标签添加媒体查询（更直接） #

如果你不想修改HTML结构，也可以直接针对h3标签写媒体查询，同样沿用W3.CSS的断点，确保和框架的响应式逻辑一致：

<table class="w3-table">
  <tr>
    <td>
      <h2 id="date1"><b>title1</b></h2> <!-- 修复标签错误 -->
    </td>
    <td class="w3-black w3-center">
      <h3>title2</h3>
    </td>
    <td class="w3-center">
      <h3>title3</h3>
    </td>
    <td class="w3-center">
      <h3>title4</h3>
    </td>
    <td class="w3-center">
      <h3>title5</h3>
    </td>
  </tr>
</table>

然后添加CSS：

/* 小屏设备下把h3字号调整为h4的大小 */
@media screen and (max-width: 600px) {
  .w3-table tr td h3 {
    font-size: 20px; /* 对应W3.CSS原生h4的默认字号 */
  }
}

这个方案无需改动HTML，只需要加一段简单的媒体查询就能实现需求。

补充说明：W3.CSS的默认字号层级参考：

• h3: 24px
• h4: 20px
• h5: 18px
  你可以根据实际需求在媒体查询里调整对应的字号，完美适配小屏显示。

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