百分比 background-size 使底纹随容器缩放而忽大忽小，因其基于容器尺寸而非图片自身；改用 em/rem（如 1em 1em）绑定字号可稳定物理密度，配合 clamp() 实现响应式过渡，但需确保 font-size 正确继承。
background-size 设置百分比时为什么底纹忽大忽小？
百分比值是相对于容器尺寸计算的，不是图片自身尺寸——这点反直觉，但直接决定缩放是否可控。
- 比如
background-size: 50%表示“背景图宽高各缩放到容器宽高的 50%”，不是原图的 50% - 容器变宽，底纹单元（tile）就跟着拉宽；容器变窄，它就压缩，密度看起来飘忽不定
- 响应式场景下，用百分比做底纹密度控制基本不可靠，尤其当容器尺寸频繁变化时
用 em 或 rem 单位固定底纹物理密度
想让每个“格子”在不同屏幕下视觉大小一致，就得脱离容器依赖，转而绑定字体度量单位。
-
background-size: 1em 1em：底纹单元始终等于当前字号大小，字号缩放时底纹同步缩放 - 配合
html { font-size: clamp(12px, 2.5vw, 16px); }，就能实现视口越小、字号越小、底纹越密的自然过渡 - 注意：必须确保父元素有可继承的
font-size，否则em会回退到浏览器默认（通常 16px），失去响应性
repeat 模式下 background-size 的兼容性陷阱
旧版 Safari（iOS 14.5 之前）对 background-size + repeat 的组合支持不稳，尤其涉及非数值单位时。
- 避免用
background-size: auto 2rem这类混合写法，某些 Safari 版本会忽略整个声明 - 稳妥做法是统一用双值：如
background-size: 2rem 2rem，或全用cover/contain - 如果必须保持宽高比例，改用 SVG 作为 background-image，内联 SVG 可通过
viewBox天然适配缩放，绕过 CSS 渲染差异
用 calc() 动态微调底纹密度但别嵌套太深
calc() 能把视口单位和固定单位混算，适合做精细密度偏移，但浏览器解析深度有限。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
background-size: calc(1rem + 0.5vw) calc(1rem + 0.5vw)，给基础密度加一点视口补偿 - 避免三层以上嵌套，如
calc(calc(1rem + 1vw) * 0.8)，部分安卓 WebView 会直接失效 - 测试时重点看折叠屏、横竖切换瞬间——
calc()值不会重绘触发 reflow，但背景重绘可能滞后一帧，造成短暂密度错位
底纹密度看着是视觉问题，其实卡在单位体系、渲染时机和浏览器解析层级三处。最常被跳过的，是没验证 font-size 是否真正继承到了背景所在元素上。
