本文教你用响应式 CSS 技巧解决固定像素边距导致的移动端文本溢出问题，通过 max-width 和相对单位（如百分比）替代固定宽度与 margin-left，确保文字始终可见、排版美观且适配所有屏幕尺寸。
本文教你用响应式 css 技巧解决固定像素边距导致的移动端文本溢出问题，通过 `max-width` 和相对单位（如百分比）替代固定宽度与 `margin-left`，确保文字始终可见、排版美观且适配所有屏幕尺寸。
在你当前的代码中，#about-me p { margin-left: 300px; width: 900px; } 是导致移动端显示异常的根本原因：300px 的固定左外边距在小屏幕上会将文本整体“推”出视口左侧，而 width: 900px 更会让段落强行撑宽，超出屏幕宽度，造成截断或水平滚动。
✅ 正确做法是放弃固定像素值，拥抱流体布局：
- 使用 margin-left: 15%（或 padding-left）实现「文本内缩」效果，百分比基于父容器宽度计算，天然适配不同屏幕；
- 将 width: 900px 替换为 max-width: 900px，让内容在大屏下舒展、在小屏下自动收缩至容器宽度；
- 同时建议为 #about-me 添加 box-sizing: border-box，确保 padding 和 border 不额外增加元素总宽（虽非必需，但属最佳实践）。
优化后的完整 CSS 如下：
.main {
text-align: center;
}
#about-me {
text-align: left;
background-color: #FF8242;
font-size: 25px;
padding: 15px;
margin: -8px;
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
color: #5c362c;
box-sizing: border-box; /* 推荐添加 */
}
#about-me h2,
#about-me p {
margin-left: 15%; /* 响应式左偏移，替代 300px */
max-width: 900px; /* 内容最大宽度，不限制最小宽度 */
}
? 进阶提示（可选但推荐）：
若希望在极小屏幕（如 iPhone SE）上进一步提升可读性，可添加媒体查询微调：
/* 当屏幕宽度 ≤ 480px 时，减小缩进并降低字体大小 */
@media (max-width: 480px) {
#about-me h2,
#about-me p {
margin-left: 8%;
font-size: 20px;
}
#about-me {
padding: 12px;
}
}
⚠️ 注意事项：
- 避免对 .main 或 #about-me 设置 width 或 min-width，否则会破坏流体特性；
- 不要依赖 JavaScript 实现此类基础布局逻辑——纯 CSS 已足够健壮、高效且语义清晰；
- 所有移动端适配应优先通过 CSS 媒体查询和相对单位完成，这是现代响应式设计的标准范式。
这样修改后，你的「关于我」区块将在桌面端保持优雅留白，在手机端自动收紧缩进、自适应宽度，彻底告别文字被裁切的困扰。
