display: inline-flex更适合按钮自适应宽度，因其使按钮保持内联特性、仅占内容宽度，配合align-items: center、flex-direction: row和清除min-width: auto才生效；text-overflow: ellipsis需white-space: nowrap、overflow: hidden和max-width三者共存；移动端按钮点击区须≥44×44px；viewport标签必须置于head最前且不可禁用缩放。
为什么display: inline-flex比display: flex更适合按钮自适应宽度
因为display: flex会让按钮变成块级元素，强制独占一行——哪怕只写“确定”两个字，它也会撑满父容器；而display: inline-flex让按钮表现得像一个可伸缩的内联盒子，只占内容所需宽度，能和文字、span自然并排，不破坏行流。
必须配合以下三点才真正生效：
-
align-items: center：避免子元素（如图标+文字）因行高差异上下错位 - 显式声明
flex-direction: row：虽是默认值，但某些旧版浏览器（如IE11）需明确写出 - 清除
button的min-width: auto干扰：部分浏览器 UA 样式会设此值，导致最小宽度不可控
text-overflow: ellipsis失效的三个常见原因
按钮文本过长时加省略号，不是只写text-overflow: ellipsis就完事。三者必须同时存在，缺一不可：
-
white-space: nowrap：防止文字在窄空间内自动换行，否则省略号不触发 -
overflow: hidden：裁掉超出部分，是ellipsis生效的前提 -
max-width（如max-width: 200px）：没有上限，ellipsis永远不显示
还要注意：overflow: hidden不能写在父容器上，否则整个按钮可能被裁掉。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
移动端触控友好性常被忽略的硬性条件
H5页面中按钮点击区域必须≥44×44px，这是 iOS 和 Android 的可访问性底线。仅靠font-size和padding不够稳定，尤其在高DPI屏上容易缩水。
- 用
rem或vw设置padding，比如padding: 0.8rem 1.2rem，随根字体缩放 - 避免
height固定死，优先用line-height+padding控制垂直居中 - 若按钮含图标，确保图标尺寸与文字基线对齐，
vertical-align: middle比top更可靠
viewport标签漏写会导致所有自适应失效
没加<meta name="viewport" content="width=device-width, initial-scale=1.0">，其他所有 CSS 自适应手段都白搭——媒体查询不响应、字体缩成小点、按钮点击区域偏移，问题全出在这行代码上。
它必须放在最前面，早于任何 CSS 或 JS 加载；也不能加maximum-scale=1.0或user-scalable=no，否则锁死双击放大，违反可访问性要求。
真正难的不是写多少断点，而是拖动浏览器窗口时，看到按钮文字突然挤成两行、边距崩塌的那个像素值——那就是你该加@media的地方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
