如何让文本内容在移动端保持左侧缩进且不溢出屏幕-html教程-PHP中文网

本文讲解如何用响应式 CSS 替代固定像素值，通过 max-width 和相对单位（如百分比）实现文本左缩进，确保在桌面和移动设备上均正常显示，避免文字被截断。

本文讲解如何用响应式 css 替代固定像素值，通过 `max-width` 和相对单位（如百分比）实现文本左缩进，确保在桌面和移动设备上均正常显示，避免文字被截断。

在开发响应式网站时，使用固定像素（如 width: 900px 或 margin-left: 300px）是导致移动端内容溢出或截断的常见原因——因为这些值在小屏幕上会强制元素超出视口宽度。解决的关键在于用相对单位替代绝对单位，并借助 CSS 的流式布局特性。

✅ 推荐方案：max-width + 百分比缩进

将原代码中硬编码的像素值替换为更灵活的写法：

#about-me p {
  margin-left: 15%;     /* 相对父容器宽度的左偏移，小屏自动缩小 */
  max-width: 900px;     /* 最宽不超过900px，大屏受限，小屏自动收缩 */
  margin-right: auto;   /* 配合 max-width 实现居中对齐效果（可选） */
}

#about-me h2 {
  margin-left: 15%;
}

这样，当屏幕宽度小于 900px 时，段落实际宽度会随视口缩小，而 15% 的左外边距也会同步变小（例如在 400px 宽的手机上 ≈ 60px），既保留了文本与左侧边缘的视觉留白，又彻底避免了水平滚动或文字被裁切。

⚠️ 注意事项与增强建议

不要删除 text-align: left：它确保段内文字左对齐，与 margin-left 配合才能实现“背景满宽、文字内缩”的效果；
慎用负 margin：当前 margin: -8px 可能干扰布局流，建议改用 margin: 0 + padding 控制内部间距；
添加 viewport 元标签（HTML 中）：
```
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
这是响应式设计的基础前提，否则移动端可能以桌面宽度渲染页面；

进阶优化（可选）：如需更精细控制，可用媒体查询针对不同断点调整缩进：

@media (max-width: 768px) {
  #about-me p,
  #about-me h2 {
    margin-left: 10%;
    font-size: 20px;
    padding: 12px;
  }
}

最终效果：桌面端保持宽幅阅读体验，移动端自动适配窄屏，文字始终清晰可见、留白协调，无需 JavaScript 即可实现真正跨设备友好的排版。