本文讲解如何用响应式 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 <head> 中）：
<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 即可实现真正跨设备友好的排版。
