最稳妥写法是max-width: min(750px, 100vw)，小屏取100vw铺满，大屏卡死750px防空旷，兼容ios safari 15.4+/chrome 79+/firefox 86+；需配合margin: 0 auto居中，且元素须为常规块级流中、非flex/grid子项、无float或绝对定位。
max-width: min(750px, 100vw) 是当前最稳妥的写法
直接写死 max-width: 750px 在 iPad 或折叠屏上会留白严重；只写 max-width: 100% 又完全没限制，尤其在未设 viewport 的旧页面里可能按 980px 渲染。用 min() 把两者包起来，浏览器自动选小的那个：小屏取 100vw（铺满），大屏卡死在 750px（防空旷）。
这个组合在 iOS Safari 15.4+、Chrome 79+、Firefox 86+ 全部支持，截至 2026 年 9 月已覆盖所有主流移动端环境。别用 min(80%, 750px) —— 百分比依赖父容器宽度，而很多移动端布局中父容器根本没设宽，结果就是失效。
为什么 margin: 0 auto 必须和 max-width 配合才居中
max-width 本身不控制位置，它只设上限。真正让元素水平居中的，是 margin: 0 auto 对块级元素的均分逻辑。但这个逻辑有前提：
- 目标元素得是常规流中的块级元素（
display: block或未被覆盖） - 父容器不能是
flex或grid容器——否则margin: 0 auto被无视，得改用justify-content: center - 不能加
float、position: absolute或position: fixed - 确保没意外触发
width: fit-content类行为（比如父容器用了display: inline-block）
max() 函数更适合保下限，别误用在“最大宽度”场景
看到名字带 “max” 就以为能设“最大宽度”，这是常见误解。max() 返回的是多个值里的最大值，它天然适合设下限，比如：
-
font-size: max(16px, 2.5vw)—— 字体至少 16px，大屏时随视口放大 -
min-width: max(320px, 85%)—— 容器最小宽度取两者较大者
想限制“最大宽度”，必须用 min()。写成 max-width: max(375px, 100vw) 是错的：在 iPhone 上 100vw = 375px，它永远取 100vw，失去限制意义。
容易被忽略的 box-sizing 和 padding 坑
max-width 算的是 content-box 的宽度（默认行为）。如果元素加了 padding 或 border，实际占用空间 = max-width + padding + border，可能撑破预期布局。
全局加这一行能避开绝大多数问题：
*, *::before, *::after { box-sizing: border-box; }
另外，如果项目用 rem 单位，可写 max-width: 75rem（假设根字号为 10px），比像素值更适配高清屏，也方便后期统一缩放。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
