position: fixed 底部悬浮条文字不随全局字号变化，因其虽属继承上下文但常被中间重置样式截断，且单位选用不当（如em无父级font-size）或第三方库px写死导致失效；需显式用rem+高特异性选择器声明字体，并同步调整line-height、padding等以保持比例。
position: fixed 底部悬浮条里的文字不随全局字号变化？不是没生效，是它绕过了常规继承链——必须单独声明 font-size，且单位选错会直接失效。
为什么底部固定条的 font-size 不继承 body 或 html 设置
因为 position: fixed 元素脱离普通文档流，但更关键的是：它仍属于普通 CSS 继承上下文，font-size 理论上该继承父级。问题出在常见写法里：
- 只设了
body { font-size: 16px; }，但底部条常挂载在最外层或<div id="app"> 根节点下，若中间有组件/框架重置了字体（比如 Vue 的 <code>scoped样式或 React 的 CSS-in-JS 注入），继承就被截断 - 用了
em单位，而固定条父容器恰好没设font-size，导致计算基准为浏览器默认（可能 16px），但你期望它响应根字号 - 第三方 UI 库（如 Ant Design）的 footer 组件内部用
px写死字号，覆盖了你的全局rem规则 - 用
footer或自定义 class（如.bottom-bar）加rem：footer, .bottom-bar { font-size: 0.875rem; /* =14px when html{font-size:16px} */ } - 如果底部条是全站统一结构（比如所有页面共用
<div class="fixed-bottom">），优先用属性选择器强化特异性：<pre class="brush:php;toolbar:false;">[class*="bottom"], [class*="footer"] { font-size: 0.875rem; }</pre>避免被框架内联样式或高优先级 class 覆盖<li>慎用 <code>!important—— 它能压住冲突，但会让后续调试变成“谁最后加 !important 谁赢”，真正需要的是提高选择器权重或清理源头（比如检查是否某处写了.fixed-bottom { font-size: 12px !important; }） - 确认
中有标准viewport：<meta name="viewport" content="width=device-width, initial-scale=1.0">
- 检查
html { font-size }是否被 JS 动态修改过（比如适配屏幕宽度的脚本），可在 DevTools 的 Elements 面板里右键→ “Break on” → “attribute modifications” 捕获 - 若项目用
html { font-size: 100%; }，确保没在 media query 里漏掉对.fixed-bottom的响应式重设（例如@media (max-width: 480px) { .fixed-bottom { font-size: 0.75rem; } }） - 把
line-height改成无单位数值（如line-height: 1.4;），它会自动乘以当前font-size -
padding和height用rem或em（例如padding: 0.5rem 0.75rem;），确保随字号等比缩放 - 图标字体（如 Font Awesome）需额外注意：若用
font-size控制图标大小，要和文字字号保持一致比例，否则会出现“字大图小”的割裂感
统一调整的两种可靠写法（推荐 rem + 显式选择器）
别依赖继承，直接命中目标元素。以下写法在现代项目中兼容性好、可维护性强：
移动端 fixed 条文字变小？先查 viewport 和根字号是否被重置
iOS Safari 或某些安卓 WebView 在窄屏下可能触发自动缩放，导致 rem 计算失准。这不是字体没变，是整个渲染上下文偏移了：
调完字体后按钮/图标挤在一起？同步改 line-height 和 padding
底部条通常含按钮、文字、图标混合布局，font-size 变大后，若 line-height 还是固定像素值，就会撑不开高度；若 padding 是 px，视觉比例就失衡：
最易被忽略的一点：底部固定条常被 z-index 层级、transform 或 will-change 触发新层叠上下文，这本身不影响 font-size，但会干扰 DevTools 中 computed 样式的层级判断——看到 computed font-size 是 14px，却不知它来自哪一层祖先，建议直接在 Elements 面板里逐层展开看“Styles”侧边栏的击穿路径。
