/* =========================================================
字号工具类 fluid-font.css
- 1920 宽：字号 = 类名数值（严格还原设计稿）
- ≤468 宽：字号 = 移动端值 min(fs, 13.5 + fs × 0.125)
- 468 ~ 1920：线性平滑过渡
- 大屏封顶：不超过 fs × 1.25
- 不依赖根字号，可与老代码共存
用法：
标题
需要单独调整的标题
注意：断点类必须和基础类一起使用（如 f48 md-f36）
========================================================= */
/* ---------- 参数 ---------- */
:root {
--fs-unit: 1px;
--fs-design: 1920; /* 设计稿宽度：此宽度下字号 = 类名数值 */
--fs-mobile: 468; /* 移动端锚点宽度：此宽度及以下使用移动端字号 */
--fs-m-base: 13.5; /* 移动端字号 = min(fs, base + fs * k) */
--fs-m-k: 0.125; /* 越小，大字号在手机上越接近 */
--fs-max-ratio: 1.25; /* 大屏最大放大倍数 */
}
/* ---------- 核心计算 ---------- */
:is(
.f10,.f11,.f12,.f13,.f14,.f15,.f16,.f17,.f18,.f19,
.f20,.f21,.f22,.f23,.f24,.f25,.f26,.f27,.f28,.f29,
.f30,.f31,.f32,.f33,.f34,.f35,.f36,.f37,.f38,.f39,.f40,
.f42,.f44,.f46,.f48,.f50,.f52,.f54,.f56,.f58,.f60,
.f64,.f66,.f68,.f70,.f72,.f76,.f80,.f88,.f90,.f96,.f100,.f120
) {
/* 移动端锚点值 */
--fs-m: min(
var(--fs, 16),
var(--fs-m-base, 13.5) + var(--fs, 16) * var(--fs-m-k, 0.125)
);
font-size: clamp(
/* 下限：移动端值 */
calc(var(--fs-m) * var(--fs-unit, 1px)),
/* 468 → 1920 之间线性过渡 */
calc(
var(--fs-m) * var(--fs-unit, 1px) +
(var(--fs, 16) - var(--fs-m)) *
(100vw - var(--fs-mobile, 468) * var(--fs-unit, 1px)) /
(var(--fs-design, 1920) - var(--fs-mobile, 468))
),
/* 上限：大屏封顶 */
calc(var(--fs, 16) * var(--fs-max-ratio, 1.25) * var(--fs-unit, 1px))
) !important;
}
/* ---------- 基础类 ---------- */
.f10{--fs:10}.f11{--fs:11}.f12{--fs:12}.f13{--fs:13}.f14{--fs:14}
.f15{--fs:15}.f16{--fs:16}.f17{--fs:17}.f18{--fs:18}.f19{--fs:19}
.f20{--fs:20}.f21{--fs:21}.f22{--fs:22}.f23{--fs:23}.f24{--fs:24}
.f25{--fs:25}.f26{--fs:26}.f27{--fs:27}.f28{--fs:28}.f29{--fs:29}
.f30{--fs:30}.f31{--fs:31}.f32{--fs:32}.f33{--fs:33}.f34{--fs:34}
.f35{--fs:35}.f36{--fs:36}.f37{--fs:37}.f38{--fs:38}.f39{--fs:39}
.f40{--fs:40}.f42{--fs:42}.f44{--fs:44}.f46{--fs:46}.f48{--fs:48}
.f50{--fs:50}.f52{--fs:52}.f54{--fs:54}.f56{--fs:56}.f58{--fs:58}
.f60{--fs:60}.f64{--fs:64}.f66{--fs:66}.f68{--fs:68}.f70{--fs:70}
.f72{--fs:72}.f76{--fs:76}.f80{--fs:80}.f88{--fs:88}.f90{--fs:90}
.f96{--fs:96}.f100{--fs:100}.f120{--fs:120}
/* ---------- 断点类（大 → 小，顺序不能乱） ---------- */
/* lg：≤1280 笔记本 */
@media (max-width: 1280px) {
.lg-f10{--fs:10}.lg-f11{--fs:11}.lg-f12{--fs:12}.lg-f13{--fs:13}.lg-f14{--fs:14}
.lg-f15{--fs:15}.lg-f16{--fs:16}.lg-f17{--fs:17}.lg-f18{--fs:18}.lg-f19{--fs:19}
.lg-f20{--fs:20}.lg-f21{--fs:21}.lg-f22{--fs:22}.lg-f23{--fs:23}.lg-f24{--fs:24}
.lg-f25{--fs:25}.lg-f26{--fs:26}.lg-f27{--fs:27}.lg-f28{--fs:28}.lg-f29{--fs:29}
.lg-f30{--fs:30}.lg-f31{--fs:31}.lg-f32{--fs:32}.lg-f33{--fs:33}.lg-f34{--fs:34}
.lg-f35{--fs:35}.lg-f36{--fs:36}.lg-f37{--fs:37}.lg-f38{--fs:38}.lg-f39{--fs:39}
.lg-f40{--fs:40}.lg-f42{--fs:42}.lg-f44{--fs:44}.lg-f46{--fs:46}.lg-f48{--fs:48}
.lg-f50{--fs:50}.lg-f52{--fs:52}.lg-f54{--fs:54}.lg-f56{--fs:56}.lg-f58{--fs:58}
.lg-f60{--fs:60}.lg-f64{--fs:64}.lg-f66{--fs:66}.lg-f68{--fs:68}.lg-f70{--fs:70}
.lg-f72{--fs:72}.lg-f76{--fs:76}.lg-f80{--fs:80}.lg-f88{--fs:88}.lg-f90{--fs:90}
.lg-f96{--fs:96}.lg-f100{--fs:100}.lg-f120{--fs:120}
}
/* md：≤1024 小屏 / 平板横屏 */
@media (max-width: 1024px) {
.md-f10{--fs:10}.md-f11{--fs:11}.md-f12{--fs:12}.md-f13{--fs:13}.md-f14{--fs:14}
.md-f15{--fs:15}.md-f16{--fs:16}.md-f17{--fs:17}.md-f18{--fs:18}.md-f19{--fs:19}
.md-f20{--fs:20}.md-f21{--fs:21}.md-f22{--fs:22}.md-f23{--fs:23}.md-f24{--fs:24}
.md-f25{--fs:25}.md-f26{--fs:26}.md-f27{--fs:27}.md-f28{--fs:28}.md-f29{--fs:29}
.md-f30{--fs:30}.md-f31{--fs:31}.md-f32{--fs:32}.md-f33{--fs:33}.md-f34{--fs:34}
.md-f35{--fs:35}.md-f36{--fs:36}.md-f37{--fs:37}.md-f38{--fs:38}.md-f39{--fs:39}
.md-f40{--fs:40}.md-f42{--fs:42}.md-f44{--fs:44}.md-f46{--fs:46}.md-f48{--fs:48}
.md-f50{--fs:50}.md-f52{--fs:52}.md-f54{--fs:54}.md-f56{--fs:56}.md-f58{--fs:58}
.md-f60{--fs:60}.md-f64{--fs:64}.md-f66{--fs:66}.md-f68{--fs:68}.md-f70{--fs:70}
.md-f72{--fs:72}.md-f76{--fs:76}.md-f80{--fs:80}.md-f88{--fs:88}.md-f90{--fs:90}
.md-f96{--fs:96}.md-f100{--fs:100}.md-f120{--fs:120}
}
/* sm：≤768 平板竖屏 */
@media (max-width: 768px) {
.sm-f10{--fs:10}.sm-f11{--fs:11}.sm-f12{--fs:12}.sm-f13{--fs:13}.sm-f14{--fs:14}
.sm-f15{--fs:15}.sm-f16{--fs:16}.sm-f17{--fs:17}.sm-f18{--fs:18}.sm-f19{--fs:19}
.sm-f20{--fs:20}.sm-f21{--fs:21}.sm-f22{--fs:22}.sm-f23{--fs:23}.sm-f24{--fs:24}
.sm-f25{--fs:25}.sm-f26{--fs:26}.sm-f27{--fs:27}.sm-f28{--fs:28}.sm-f29{--fs:29}
.sm-f30{--fs:30}.sm-f31{--fs:31}.sm-f32{--fs:32}.sm-f33{--fs:33}.sm-f34{--fs:34}
.sm-f35{--fs:35}.sm-f36{--fs:36}.sm-f37{--fs:37}.sm-f38{--fs:38}.sm-f39{--fs:39}
.sm-f40{--fs:40}.sm-f42{--fs:42}.sm-f44{--fs:44}.sm-f46{--fs:46}.sm-f48{--fs:48}
.sm-f50{--fs:50}.sm-f52{--fs:52}.sm-f54{--fs:54}.sm-f56{--fs:56}.sm-f58{--fs:58}
.sm-f60{--fs:60}.sm-f64{--fs:64}.sm-f66{--fs:66}.sm-f68{--fs:68}.sm-f70{--fs:70}
.sm-f72{--fs:72}.sm-f76{--fs:76}.sm-f80{--fs:80}.sm-f88{--fs:88}.sm-f90{--fs:90}
.sm-f96{--fs:96}.sm-f100{--fs:100}.sm-f120{--fs:120}
}
/* xs：≤468 手机 */
@media (max-width: 468px) {
.xs-f10{--fs:10}.xs-f11{--fs:11}.xs-f12{--fs:12}.xs-f13{--fs:13}.xs-f14{--fs:14}
.xs-f15{--fs:15}.xs-f16{--fs:16}.xs-f17{--fs:17}.xs-f18{--fs:18}.xs-f19{--fs:19}
.xs-f20{--fs:20}.xs-f21{--fs:21}.xs-f22{--fs:22}.xs-f23{--fs:23}.xs-f24{--fs:24}
.xs-f25{--fs:25}.xs-f26{--fs:26}.xs-f27{--fs:27}.xs-f28{--fs:28}.xs-f29{--fs:29}
.xs-f30{--fs:30}.xs-f31{--fs:31}.xs-f32{--fs:32}.xs-f33{--fs:33}.xs-f34{--fs:34}
.xs-f35{--fs:35}.xs-f36{--fs:36}.xs-f37{--fs:37}.xs-f38{--fs:38}.xs-f39{--fs:39}
.xs-f40{--fs:40}.xs-f42{--fs:42}.xs-f44{--fs:44}.xs-f46{--fs:46}.xs-f48{--fs:48}
.xs-f50{--fs:50}.xs-f52{--fs:52}.xs-f54{--fs:54}.xs-f56{--fs:56}.xs-f58{--fs:58}
.xs-f60{--fs:60}.xs-f64{--fs:64}.xs-f66{--fs:66}.xs-f68{--fs:68}.xs-f70{--fs:70}
.xs-f72{--fs:72}.xs-f76{--fs:76}.xs-f80{--fs:80}.xs-f88{--fs:88}.xs-f90{--fs:90}
.xs-f96{--fs:96}.xs-f100{--fs:100}.xs-f120{--fs:120}
}