最简最稳的写法是 width: min(100vw, 750px)，需配合 box-sizing: border-box 和正确 viewport 设置，否则 ios safari 或小屏安卓易出现右溢出或居中失效。
直接说结论：用 width: min(100vw, 750px) 是最简、最稳的写法，比纯 max-width 更弹性，但必须配合 box-sizing: border-box 和正确的 viewport 设置，否则在 iOS Safari 或小屏安卓上容易右边溢出或居中失效。
为什么不用单独的 max-width？
单独写 max-width: 750px 在移动端会失效——因为父容器没宽度、元素是 inline、或者没设 margin: 0 auto，浏览器根本不知道往哪“限制”。更麻烦的是，它无法响应视口变化：窄屏下你想要占满，它却卡死在 750px；宽屏下你又希望它别撑太开，它却随父容器一路拉伸。
而 min() 是计算阶段就介入的：每次渲染都重新算 100vw 和 750px 哪个更小，结果直接参与 layout，天然适配滚动条宽度、缩放、折叠屏等场景。
-
100vw包含滚动条宽度（iOS Safari 尤其明显），如果发现右边有隐藏空白，换100dvw或加overflow-x: hidden - 别用
min(100%, 750px)——100%依赖父宽，而很多移动端布局里父容器是body或 flex 容器，宽度不可靠 - 旧版 Chrome（≤98）对
min(calc(...), ...)支持不稳定，绕开：先用calc()算好再塞进min()，或直接用clamp()
min() 和 max-width 能一起用吗？
能，但没必要叠床架屋。比如这样写：
.container {
width: min(100vw, 750px);
margin: 0 auto;
}
已经覆盖了 max-width 的全部能力，还多出视口响应性。如果你非要保留 max-width，只有一种合理场景：需要 fallback 到老浏览器（IE 或 Android 4.x WebView），此时可双写：
.container {
max-width: 750px;
width: min(100vw, 750px);
}
现代浏览器会忽略 max-width，因为 width 优先级更高；老浏览器则退回到 max-width。
- 不要写
width: 100%; max-width: 750px;再套min()——语义重复，且100%在 flex/grid 父容器下可能被忽略 -
min()返回的是计算值，不是“约束”，所以它不阻止子元素溢出；若内部有浮动或绝对定位，仍需额外清理
移动端居中失效？先查这三件事
width: min(100vw, 750px); margin: 0 auto; 看似简单，但在真实项目里常不居中，原因很具体：
- 父元素用了
display: flex或display: grid——margin: 0 auto在 flex/grid 子项上无效，改用justify-content: center或place-items: center - 没设
box-sizing: border-box——padding 和 border 会撑出容器，导致视觉偏移；全局重置比每个容器手动写更可靠 -
viewport标签缺失或位置不对 ——必须放在最前面，否则 iOS Safari 渲染时视口还是 980px，100vw就失去意义
真正容易被忽略的不是函数怎么写，而是 min() 的结果是静态快照：resize 时重算，但不会监听滚动条出现/消失、字体缩放、系统深色模式切换这类事件。如果你的容器内嵌了动态内容（比如可展开的菜单），得靠 JS 补充监听，CSS 自身做不到实时响应。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
