button的width/height常失效，因浏览器对替换元素有UA样式限制；需检查display是否为inline-block/block，配合padding、min-width/min-height确保点击区≥44px×44px，并注意JS设置样式须带单位。
button 的 width/height 为什么经常失效？
直接写 width: 120px 或 height: 44px 对很多按钮没反应，不是你代码写错，而是浏览器对 height 可能被忽略，width 在 inline 模式下也无效。
关键判断：按钮是否还保持默认的 display: inline-block？
用开发者工具看「Computed」面板里的 display 值，别只信 Styles 面板写的规则。
如果实际是 inline，padding-top/padding-bottom 就可能不生效（Safari 15 以前常见）。
必须显式声明：display: inline-block（适合行内排列）或 display: block（适合全宽按钮）。
真正控制“可点击区域”的三个必设属性
移动端点击区必须 ≥44px × 44px，W3C 和 Apple HIG 都强制要求。只调 font-size 或只撑 width/height 不解决问题——文字大了，热区还是窄的。
必须组合使用：
-
padding: 12px 20px：扩展内边距，让点击区域随内容自然延展 -
min-width: 44px：防短文字按钮（如“+”）被压扁 -
min-height: 44px：保底垂直可点高度，比硬写height: 44px更健壮
额外建议：
- 加
border-radius: 6px提升触控感知（圆角比直角更易定位） - iOS 上加
-webkit-tap-highlight-color: rgba(0,0,0,0.1)，否则点击反馈发虚或消失
购物车按钮尺寸该用什么单位？
固定 px 在高 DPI 屏或用户缩放页面时会失真；em 受父级字体影响不可控；rem 虽稳定但需配合根字号调整。
最稳妥方案是「以 font-size 为基准 + padding 主导」：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 小按钮（图标+）：
font-size: 14px+padding: 8px 16px+min-height: 32px - 主操作按钮（“加入购物车”）：
font-size: 16px+padding: 10px 20px+min-height: 44px - 大按钮（促销强引导）：
font-size: 18px+padding: 12px 24px+min-height: 48px
别用 transform: scale() 模拟变大——它只放大视觉，不扩大事件响应区域，反而可能因 overflow: hidden 裁掉边缘热区。
JS 动态改按钮大小时最容易漏的一件事
用 JS 修改样式时，btn.style.fontSize = 18 是无效的，浏览器根本不会解析。
必须带单位：btn.style.fontSize = '16px'、btn.style.padding = '10px 20px'。
同理，用 getComputedStyle(btn).height 读取的是计算后带单位的字符串（如 "44px"），不能直接参与数值运算，得先 parseFloat()。
复杂点在于：按钮尺寸不是孤立参数，而是 padding、font-size、line-height、border、box-sizing 共同作用的结果。只要其中一项被全局样式覆盖（比如重置了 box-sizing），整个尺寸预期就会崩。真机测试前，务必在「Computed」里逐项核对。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
