按钮文字未变大需先查三件事：单位是否遗漏（如font-size: 16无效，必须写16px或1rem）、父容器是否设font-size: 0导致继承中断、外部!important样式是否压制了当前声明。
font-size写对了但按钮文字没变大，先查这三件事
不是代码没生效，而是常被忽略的底层约束卡住了。最典型的是：单位漏写、继承中断、优先级被压。
-
font-size: 16无效——必须带单位，font-size: 16px或font-size: 1rem才合法 - 父容器设了
font-size: 0（常见于清除 inline 元素间隙的 hack），子元素哪怕写font-size: 20px也会继承 0，得显式重写 - 外部样式表里有
button { font-size: 14px !important; }，内联或局部样式就覆盖不了，得用更高权重要么删!important
按钮字体大小该用 px、em 还是 rem？看控制粒度
单位选错不是“不美观”，而是后续维护会反复踩坑。关键区别不在“哪个更高级”，而在“谁说了算”。
-
px：适合像素级对齐（比如图标+文字严格居中），但无法响应系统字号缩放，无障碍体验差 -
em：相对于按钮自身父容器的font-size，适合组件内部比例固定（如按钮文字始终比旁边标签大 20%） -
rem：只看的font-size，整站缩放时改一处，所有按钮自动等比变化，推荐作为默认选择
只调按钮文字大小，别动 width/height 就够了
直接设 width 和 height 看似简单，但会让按钮脱离内容自适应逻辑，尤其在多语言或动态文本场景下容易溢出或留白。
- 正确做法：靠
padding+font-size联动，比如padding: 0.75em 1.5em; font-size: 1rem;，文字变大，内边距自动撑开 - 加
box-sizing: border-box防止 padding 影响整体尺寸计算（尤其配合 border 使用时） - 避免用
zoom或transform: scale()——它们只是视觉拉伸，实际字体尺寸没变，影响文字选中、屏幕阅读器识别和打印效果
响应式按钮文字：clamp() 比媒体查询更轻量
想让按钮文字在小屏变小、大屏变大，又不想写一堆 @media？clamp() 是目前最实用的解法。
- 写法示例：
font-size: clamp(0.875rem, 2.5vw, 1.125rem);，意思是：最小 0.875rem，最大 1.125rem，中间按视口宽度 2.5vw 平滑过渡 - 注意 vw 单位基于视口宽度，如果按钮在窄容器内（比如 sidebar），可能不如
rem+ 媒体查询稳定 - 旧浏览器不支持
clamp()时，可降级为font-size: 1rem;，它本身已是响应式基础
font-size，而是判断它该听谁的：是根元素、父容器，还是视口？一旦控制源搞混，后面所有调整都在对抗 CSS 继承和层叠规则。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
