如何实现可识别窗口大小自动调整的响应式网页文本？

你当前给段落设置了固定值500px的左右内边距，该值不会随浏览器窗口尺寸变化，当窗口宽度较小时，固定内边距会挤压文本显示区域，导致文本变成窄列显示。

自适应文本效果实现方案 #

推荐使用现代CSS动态单位+长度限制属性实现平滑适配，修改后的CSS代码如下：

.about p {
  /* 左右内边距动态适配，小屏最小留20px，大屏按视口比例增加 */
  padding: 0 max(20px, 15vw);
  /* 字号随窗口大小平滑调整，避免小屏字号过大、大屏字号过小 */
  font-size: clamp(1rem, 2vw, 1.25rem);
  /* 限制文本最大行宽为80字符，符合阅读舒适度标准 */
  max-width: 80ch;
  /* 段落水平居中，替代固定padding实现大屏留白效果 */
  margin: 0 auto;
}

各属性作用说明：

• max(20px, 15vw)：取两个值中的较大值作为内边距，既保证小屏幕下文本不会贴到窗口边缘，又能在大屏幕下自动预留足够的两侧留白
• clamp(1rem, 2vw, 1.25rem)：字号在1rem到1.25rem之间随视口宽度动态变化，适配不同尺寸屏幕的阅读体验
• max-width: 80ch + margin: 0 auto：比固定padding的适配性更强，不管屏幕多大，文本行宽都保持在舒适阅读范围内，多余空间自动分配到左右两侧

如果需要兼容不支持max()/clamp()的旧版浏览器，可以用媒体查询方案：

.about p {
  padding: 0 20px;
  font-size: 1rem;
  max-width: 80ch;
  margin: 0 auto;
}

@media screen and (min-width: 1200px) {
  .about p {
    padding: 0 500px;
    font-size: 1.25rem;
  }
}

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