推荐用 css 变量配合 calc() 控制尺寸，如 --size-base: 8px; width: calc(var(--size-base) * 60); 需确保变量已定义且 calc() 内有空格；min-width 与 max-width 共同限定有效区间，box-sizing: border-box 可使 min-width 包含 padding 和 border。
用 --size-base 变量配合 calc() 控制宽度边界
直接写死像素值会让尺寸难以维护，尤其在主题切换或适配多端时。用 CSS 变量定义基础单位，再用 calc() 组合，是更灵活的做法。
常见错误是变量未定义就使用，或者 calc() 里漏空格（比如 calc(100%-20px) 缺空格 → 整条规则静默失效）。
-
:root { --size-base: 8px; --gap: 16px; }—— 建议统一放在:root，避免作用域问题 - 宽度限制示例：
width: calc(var(--size-base) * 60); max-width: calc(100vw - var(--gap) * 2); - 注意：
var(--gap)必须已声明，否则整个calc()计算结果为invalid，浏览器会忽略该声明 - 不推荐在
min-width中混用vw和变量做减法（如min-width: calc(320px - var(--gap))），低版本 Android 可能不支持
min-width 和 max-width 同时用时的实际生效逻辑
它们不是“谁后写谁赢”，而是共同划定一个有效区间：最终宽度必须 ≥ min-width 且 ≤ max-width，再由内容、父容器和 width 值共同决定实际取值。
最容易踩的坑是同时设了 width: 400px 和 min-width: 500px —— 此时 width 被强制忽略，但开发者常误以为是样式没生效。
- 若希望宽度优先自适应，
width应设为auto或fit-content，再靠min/max约束 - 在
flex容器中，子项默认flex-shrink: 1，会压缩到低于min-width；需显式加flex-shrink: 0 -
table或display: table-cell元素里，min-width常被无视，得配合table-layout: fixed
移动端 min-width 失效的典型场景与绕过方式
iOS Safari 对 input、button 等表单控件有内置最小尺寸保护（比如强制最小高度 44px），min-width 在水平方向也可能被 -webkit-appearance 截断。
- 给表单元素加
-webkit-appearance: none再设min-width，否则样式可能被重置 - 慎用
min-width: 100%—— 横屏或缩放时易触发意外回流，改用min-width: 0+flex: 1更可靠 - 用
vw单位（如min-width: 30vw）前，务必加降级：min-width: 320px; min-width: 30vw;，因部分旧版 Android WebView 不支持vw
box-sizing: border-box 对尺寸约束的实际影响
默认 box-sizing: content-box 下，min-width: 300px 只管内容区，一旦加了 padding: 20px 和 border: 2px solid，总宽就变成 344px —— 这常导致布局错位，让人误判 min-width 没起作用。
- 全局重置建议：
* { box-sizing: border-box; }，但注意它会影响所有元素，包括第三方组件 - IE8+ 支持
box-sizing，但旧版需加-ms-box-sizing前缀 - 如果只对特定组件启用，写成
.card { box-sizing: border-box; min-width: 300px; }，此时min-width包含 padding 和 border
真正麻烦的不是写几行 CSS，而是当 min-width 看似不生效时，得一层层排查盒模型、父容器 flex 属性、浏览器内置样式、甚至移动端 UA 特性——这些细节不显眼，但几乎每次都会卡住人。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
