优先用 min-width 实现移动优先响应式，padding 控制按钮尺寸兼顾点击热区，避免 font-size 或 transform 缩放；media query 失效多因选择器权重或缺失 viewport 标签；clamp() 可平滑过渡但需注意兼容性。
media query 里用 min-width 还是 max-width？
选哪个取决于你采用的是移动优先还是桌面优先策略。现代开发基本都用移动优先，所以 min-width 是更安全的选择——先写小屏样式，再用 @media (min-width: 768px) 覆盖中屏，@media (min-width: 1024px) 覆盖大屏。用 max-width 容易漏掉高分辨率设备，比如某些平板横屏时宽度超过 1024px，但样式却还套着“平板规则”。
按钮尺寸该改 padding 还是 font-size？
优先调 padding，而不是直接缩放 font-size 或用 transform: scale()。原因很简单：可点击区域太小会伤用户体验，尤其在触摸屏上。padding 同时撑开视觉尺寸和点击热区，而只调 font-size 可能让按钮看起来小、点起来也难。
推荐组合：
-
padding控制整体大小（如移动端padding: 8px 16px，桌面端padding: 12px 24px） -
font-size微调文字比例（如从14px到16px），别超过 2px 跳变 - 避免用
width/height固定值，除非按钮必须等宽——那样反而破坏响应式弹性
为什么写了 media query 按钮尺寸却没变？
常见原因不是语法错，而是层叠顺序或选择器权重压不住原始样式。比如你在全局写了 .btn { padding: 10px; }，然后在媒体查询里写 @media (min-width: 768px) { .btn { padding: 14px; } }，结果没生效——大概率是因为前面那条规则带了 !important，或者用了更具体的选择器如 body .header .btn。
排查步骤：
- 打开浏览器开发者工具，看 computed 样式里
padding值被哪条规则覆盖 - 确认媒体查询断点是否真的触发（调整窗口宽度，看控制台是否显示对应 media query 生效）
- 检查是否漏写了
meta viewport标签：<meta name="viewport" content="width=device-width, initial-scale=1">，没有它，移动端 media query 基本失效
要不要用 rem/vw 替代 px 写按钮尺寸？
可以，但别全量替换。vw 单位对单个按钮容易失控——比如 width: 20vw 在小屏上可能只有 36px，根本不够点；rem 更稳妥，前提是根字体大小随屏幕动态调整（例如用 JS 或 clamp()）。更实际的做法是：基础用 px，关键断点用 clamp(12px, 2.5vw, 16px) 控制 font-size，再让 padding 跟着变。
示例：
button {
padding: clamp(8px, 1.5vw, 12px) clamp(16px, 3vw, 24px);
font-size: clamp(14px, 1.2vw, 16px);
}
注意：clamp() 的兼容性要查一下，IE 不支持，iOS Safari 13.4+ 才稳定。
真正麻烦的不是怎么写，而是按钮在不同断点之间跳变时有没有视觉割裂感——比如从 8px → 12px padding，中间没有过渡，用户缩放窗口时会明显“抖”。这种细节没人提，但一上线就被截图吐槽。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
