CSS 布局里的几个实用边界情况

写页面时最容易忽略的不是主视觉，而是屏幕变窄、文字变长、图片缺失之后的表现。 这篇记录几个我常用的兜底写法。

容器宽度

固定最大宽度加动态边距，能让桌面和移动端都比较稳定。

.wrap {
  width: min(1080px, calc(100% - 32px));
  margin: 0 auto;
}

自适应标题

大标题可以用 clamp 控制上下限，既保留桌面的冲击力，也避免手机端溢出。

h1 {
  font-size: clamp(36px, 7vw, 80px);
  line-height: 1.05;
}

对个人站来说，布局不一定要复杂，但需要在常见设备上稳定。把这些基础边界处理好， 页面会比堆很多装饰更耐看。