如何调整网站首页文本在手机预览端的大小实现自适应显示？

当前你的CSS代码存在两个问题：

1. 仅对宽度≤375px的设备设置了标题字间距，没有调整字号，且375px的断点覆盖范围太窄，无法适配所有手机设备
2. 现有@media媒体查询块缺少闭合的}，语法错误导致规则可能无法生效

将现有CSS末尾的媒体查询部分替换为以下代码即可：

@media screen and (max-width: 768px) {
  div.pth-hero__message h2 {
    /* 动态适配字号，可根据实际显示效果调整数值 */
    font-size: clamp(1.5rem, 6vw, 3rem) !important;
    letter-spacing: -1px;
    /* 强制长文本自动换行 */
    word-wrap: break-word;
  }
}

/** End Block Kit CSS: 144-3-3a7d335f39a8579c20cdf02f8d462582 **/

参数说明： #

• 断点设置为768px，覆盖所有手机、平板竖屏的移动端场景
• clamp()参数：第一个值是最小字号，第二个是随屏幕宽度缩放的比例，第三个是最大字号，可根据自己想要的显示效果调整数值
• 如果不需要动态适配，也可以拆分为多个断点设置固定字号，示例如下：

/* 平板竖屏 */
@media screen and (max-width: 768px) {
  div.pth-hero__message h2 {
    font-size: 28px !important;
  }
}
/* 大屏手机 */
@media screen and (max-width: 576px) {
  div.pth-hero__message h2 {
    font-size: 22px !important;
  }
}
/* 小屏手机 */
@media screen and (max-width: 375px) {
  div.pth-hero__message h2 {
    font-size: 18px !important;
    letter-spacing: -1px;
  }
}

/** End Block Kit CSS: 144-3-3a7d335f39a8579c20cdf02f8d462582 **/

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