CSS变量需配合calc()和clamp()实现自适应字号，因var()仅传递字符串、不支持直接运算；clamp()通过最小值、理想值、最大值三参数动态响应视口，且变量须直接写入参数内而非定义在:root中。
CSS变量完全能替代预处理器做自适应字号，但必须配合calc()和clamp()，不能只靠var()直接赋值。
为什么var(--size)不能直接当字号用
原生CSS变量是字符串容器，不是数值类型。写--font-size: 16px没问题，但font-size: var(--font-size)只是把"16px"这个字符串原样插入——这本身没错；问题出在你想动态缩放时：font-size: var(--font-size) * 1.2会直接报错，浏览器忽略整条声明。
- 所有数学运算必须显式包裹在
calc()里：font-size: calc(var(--font-size) * 1.2) -
var()不能嵌套在其他函数中（比如em()、rem()），只能作为calc()的原子操作数 - 如果变量值带单位（如
16px），calc()里不能再额外加单位，否则解析失败
用clamp()实现响应式字号的核心写法
clamp()是目前最简洁的自适应字号方案，它天然支持CSS变量，且无需媒体查询。关键在于把最小值、首选值、最大值都设为可变参数：
ImageMagick 批处理处理器
下载
使用 ImageMagick 的 convert 和 mogrify 命令进行批量图像处理，支持调整大小、裁剪、水印和格式转换。与 libvips 集成以实现高性能缩略图生成。
html {
--min-font: 14px;
--ideal-font: 2.5vw;
--max-font: 24px;
}
h1 {
font-size: clamp(var(--min-font), var(--ideal-font), var(--max-font));
}-
--ideal-font用vw单位保证随视口缩放，但必须配合min/max防止单位失效（比如小屏下2.5vw可能小于14px） - 变量名要语义化，避免
--f1这类缩写，否则后期维护时无法快速判断作用域 - 不要在
:root里定义带vw的变量再引用，因为var(--x)无法触发clamp()的动态重计算——必须直接写在clamp()参数里
配合rem基准做全局缩放的陷阱
很多人想用CSS变量控制html的font-size来驱动整个rem体系，但要注意：浏览器对html { font-size: var(--base); }的支持不一致，尤其在Android WebView 4.4–6.0中会导致重绘失效。
立即学习“前端免费学习笔记（深入）”；
- 安全做法是用JS动态设置
document.documentElement.style.fontSize，再用CSS变量做fallback：html { font-size: clamp(12px, 2.5vw, 16px); font-size: var(--base, 16px); } - 如果坚持纯CSS，把
--base定义在:root后，必须确保所有rem计算都走calc()：padding: calc(var(--base) * 1.5);，不能写padding: 1.5rem -
rem本身是相对于根元素字号的绝对单位，和CSS变量无关；变量只负责提供那个“基准值”，别混淆概念
真正难的不是写法，而是变量命名策略和作用域隔离——比如暗色模式切换时，字号变量要不要跟着变？clamp()里的vw值在折叠屏上是否要降级？这些细节决定了方案能不能落地。
