display: inline-flex 是唯一靠谱起点，因 button 是替换元素，需换 display 类型而非硬调 width；必须设在包裹容器上，清空 button 的 width/min-width/max-width、重置 min-width: 0、禁用 flex-grow；文字省略需 white-space: nowrap、overflow: hidden、max-width；触控区≥44×44px，viewport meta 必须正确。
直接给 button 设 width: auto 或 width: 100% 基本无效——浏览器 UA 样式里默认的 min-width: auto 会覆盖它，导致宽度不随文字变化，或在某些场景下撑满父容器。
为什么 display: inline-flex 是唯一靠谱起点
按钮不是普通块元素，它是替换元素，自带 UA 干预逻辑。想让它“只占内容宽度、能和文字并排、支持内部垂直居中”，必须换掉默认 display 类型，而不是硬调 width。
-
display: flex会让按钮变成块级，独占一行，破坏行流（比如放在<p>里会强制换行） -
display: inline-block虽然内联，但子元素对齐难控，vertical-align容易错位，且不支持align-items -
display: inline-flex是折中解：它让按钮表现为“可伸缩的内联盒子”，IE11+ 原生支持，无需 JS 或媒体查询 - 但注意：
inline-flex必须写在**包裹容器**上（如<span class="btn-wrapper"><button>确定</button></span>），不能直接设在button上
button 自身样式必须清空的三件事
哪怕用了 inline-flex，只要按钮自己写了这些，自适应就静默失效：
- 删掉所有
width、min-width、max-width——包括你在某个 class 里漏写的min-width: 80px - 显式重置
min-width: 0（比width: auto更稳妥，尤其在旧版 Safari 中） - 禁用
flex-grow、flex: 1等 flex 属性，它们会强制拉伸 - 用
font: inherit避免字体继承错乱；padding推荐固定值（如8px 16px）或rem，别用百分比
文字过长时加省略号，三要素缺一不可
仅写 text-overflow: ellipsis 永远不生效。它是个“装饰开关”，前提是内容真被裁掉了：
立即学习“前端免费学习笔记（深入）”；
-
white-space: nowrap：防止文字在窄空间自动换行（否则裁不着） -
overflow: hidden：实际裁剪超出部分（这是 ellipsis 的前提） -
max-width: 200px（或其他具体值）：没有上限，ellipsis 就不会触发 - ⚠️ 父容器（如
.btn-wrapper）不能设overflow: hidden，否则整个按钮会被裁掉边框和文字
移动端点击区和 viewport 是隐藏陷阱
自适应按钮在手机上点不中？大概率是这两个地方没做：
- 按钮触控区域必须 ≥ 44×44px。光靠
padding: 8px 16px不够，高 DPI 屏上会缩水。推荐用padding: 0.8rem 1.2rem或vw单位 -
<meta name="viewport" content="width=device-width, initial-scale=1.0">必须放在<head>最前面，且不能加maximum-scale=1.0。漏了它，所有自适应 CSS 都白写 - 如果按钮含图标，确保用
vertical-align: middle对齐，别依赖top或baseline，基线在不同字体下浮动很大
真正卡住的从来不是哪行代码写错了，而是你忘了删掉某处 min-width，或在父容器上误加了 overflow: hidden——它们不会报错，只会让按钮在某个屏幕宽度下突然变宽、换行、截断，而且很难一眼定位。
