媒体查询里改 padding 和 font-size 真的够用吗
不够用，但它是起点。只调这两个值，按钮在小屏上可能文字溢出、点击热区变小；大屏上又容易显得单薄或比例失调。真正要稳，得同步控制 min-width、height 和 line-height，否则 font-size 变了，行高没跟上，文字会贴边甚至被裁。
常见错误现象：font-size: 12px 下按钮文字垂直居中偏上，点按区域肉眼可见变窄；iOS Safari 中 padding 在某些缩放下失效，实际点击热区比视觉小一圈。
- 移动端优先：先写默认样式（小屏），再用
@media (min-width: 768px)往上加断点 - 避免用
em或rem单独驱动padding，它会随字体缩放二次放大，导致不可控膨胀 - 推荐组合：固定
height+line-height匹配 +padding微调，比纯靠padding更稳
@media 断点该设在哪几个宽度
别迷信“主流设备分辨率”。真实瓶颈是内容撑不开、按钮挤不下、手指点不准——这些发生在具体像素临界点，不是设备型号决定的。
最实用的三个断点：@media (min-width: 480px)（防 iPhone SE 横屏文字折行）、@media (min-width: 768px)（平板竖屏最小可用宽度）、@media (min-width: 1024px)（桌面端起始）。再多断点反而增加维护成本，且现代浏览器对连续缩放支持更好，不必为 900px、960px 单独设。
立即学习“前端免费学习笔记（深入）”；
- 不要用
max-width写法，容易和后续断点冲突，统一用min-width向上覆盖 - 如果项目需兼容旧版 iOS，加一条
@supports (-webkit-touch-callout: none)专修 Safari 点击热区 - 断点值写成
480px而非480.01px，后者无意义，还可能触发某些安卓 WebView 的解析 bug
按钮尺寸响应式时，font-size 该用什么单位
用 px 最省心，尤其当按钮内含图标或固定高度时。rem 看似灵活，但一旦根字体被用户缩放或 JS 动态修改，按钮尺寸就脱钩；vw 在桌面端容易过大，小屏又过小，缺乏锚点。
典型问题：用 font-size: 2vw，在 375px 宽屏上变成 7.5px，文字糊成一片；换成 14px 默认，再配合媒体查询阶梯调整，可读性和一致性立刻提升。
- 推荐写法：
font-size: 14px;→@media (min-width: 768px) { font-size: 16px; }→@media (min-width: 1024px) { font-size: 18px; } - 若必须用相对单位，选
clamp(14px, 4vw, 18px)，但注意 IE 不支持，需加降级 - 图标按钮慎用纯
font-size控制大小，SVG 图标建议用width/height单独设，和文字解耦
为什么改了 padding，按钮在某些安卓机上还是点不准
因为部分安卓 WebView（尤其 Android 6–8）对 touch-action 和 min-height 的处理不一致，光调 padding 不补 min-height，会导致点击区域被截断。这不是 CSS 写错了，是渲染层把“可点击区域”和“视觉区域”算成了两套。
错误现象：padding: 8px 16px 在 Chrome 桌面模拟器看着正常，真机上手指点边缘没反应；查 getBoundingClientRect() 发现 height 比预期小 2–4px。
- 强制补一层：
min-height: calc(1em + 16px);（1em 对应当前 font-size，16px 是上下 padding 总和） - 加
touch-action: manipulation;，告诉浏览器这是按钮，别等双击或长按 - 避免用
transform: scale()放大按钮，它不扩大点击热区，纯视觉欺骗
复杂点在于：同一套媒体查询，在折叠屏展开前后可能触发不同渲染路径；最容易被忽略的是，user-scalable=no 在 meta 标签里关掉缩放，会让某些安卓机彻底忽略 padding 的物理尺寸映射。
