font-size百分比值基准是父元素字体大小，逐层继承相乘易失控；推荐根元素设62.5%配合rem使用，vw需用clamp()限制范围，调试依赖computed面板，移动端需≥16px防缩放。
用 font-size 百分比值时，基准是谁？
百分比不是凭空生效的——它始终相对于父元素的 font-size 计算。比如父元素设为 16px，子元素写 font-size: 150%，实际就是 24px。如果父元素本身也是百分比（如 87.5%），就会逐层相乘，容易失控。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 全局重置时，推荐在
html根元素上设一个基础值，比如font-size: 62.5%（即让 1rem ≈ 10px），后续用rem更稳 - 避免多层嵌套百分比，尤其不要在
body和内部div都用百分比叠加 - 调试时右键检查元素，在浏览器开发者工具里看「Computed」面板中的真实像素值，比猜更可靠
vw 单位调文字大小真能适配多屏？
vw 看起来很美：1vw = 视口宽度的 1%，文字随屏幕拉伸自动变大。但它有个硬伤——手机竖屏时宽度小，4vw 可能只剩 12px，根本看不清；而横屏平板又可能飙到 32px，排版崩掉。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 慎用纯
vw，更推荐组合写法：font-size: clamp(14px, 4vw, 20px)，强制限制上下限 -
clamp()三个参数顺序固定：最小值、首选值、最大值，别写反 - 注意兼容性：
clamp()在 IE 完全不支持，Android 4.x 旧 WebView 也不行，需加降级（如先写font-size: 16px）
为什么改了 font-size 但文字没变？
常见于 CSS 优先级或继承干扰。比如你给 p 设了 font-size: 1.2em，但它父容器是 div，而该 div 的字体被某条更靠后的规则设为 12px，那 em 就基于 12px 算，结果可能比预期小得多。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用浏览器开发者工具点开「Styles」面板，逐层看哪些规则被划掉（strikethrough），哪些生效
- 检查是否用了
!important覆盖了你的设置 - 留意某些 UI 框架（如 Bootstrap）默认设置了
html { font-size: 100% }或媒体查询响应式字体，会覆盖你写的根字号
移动端文字太小被缩放，怎么禁用双击放大？
iOS Safari 默认会对小于 16px 的文字触发「自动缩放」，用户双击后页面局部放大，体验割裂。这不是 font-size 没生效，而是浏览器主动干预。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 在
里加 viewport meta：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> - 但更合理的方式是：确保正文
font-size≥ 16px（或等效 rem 值），让 Safari 自动放弃缩放逻辑 - 不要滥用
user-scalable=no，它会锁死所有缩放，对视障用户不友好
%、em、rem、vw 混着用又没理清层级关系，结果改一处，满屏飘。盯住根元素和直接父级的字号，比反复试数值更省时间。 
