/* ========================================================================== 选址参谋 · 字号 / 行高 / 间距 / 版心 基准令牌（全站唯一真源） -------------------------------------------------------------------------- 本文件必须排在所有组件样式表之前：变量先定义，后面的文件才能 var() 取到。 四段断点覆写统一放在文件末尾，保证同一层叠顺序里最后生效，不被组件样式反盖。 基准条件的来源：1920×1080 屏幕 + 浏览器缩放 150% => CSS 逻辑视口 1280×720。 所以下面每个取值都是按 1280 逻辑宽定的，不是按 1920 物理宽定的。 例：正文 19px 在 1280 逻辑宽里一行约 65 个汉字（(1280-48)/19≈65），落在中文 长文 60~85 字的舒适区间；v1.8 的旧基准是 15px/约 82 字，一行太满，眼睛回扫 距离长、读两段就得重新找行首。本次整体放大约 1.25 倍（浏览器 125% 的视觉 大小），行高与版心同时重算，不是把字号单独改大。 为什么不用 vw 定字号：150% 缩放时 vw 随视口二次抖动，微信内置浏览器下拉刷新 会重算 vw，字号会跳；移动端横竖屏切换时也会跳。固定值 + 断点是稳定的做法。 这里也不使用 clamp() 以外的新特性，且所有引用处都写成 var(--fs-x, 兜底值)， 老 WebView 不认识变量时仍能落到固定像素。 ========================================================================== */ :root { /* ---------- 字号（全部 = 旧值 × 1.25，四舍五入到整数） ---------- */ /* 旧 13px × 1.25 = 16.25，取 16px 保持整数字号：辅助说明、表注、时间戳、 页脚版权。仍是这套深色界面上的可读下限，再往下（14px 以下）在 150% 缩放 + Windows 字体渲染下笔画已经发虚。 */ --fs-xs: 16px; /* 旧 14px × 1.25 = 17.5，取 18px：表格正文与次要说明。后台十几列的表单独 收在 16px（见文件末尾 body.admin），前端表格用 18px 读着不费劲。 */ --fs-sm: 18px; /* 旧 15px × 1.25 = 18.75，取 19px 作正文基准。1280 逻辑宽下 19px 一行约 65 个汉字（(1280-48)/19≈65），35cm 视距不费力，也不会像旧 15px 那样 一行塞 82 字。 */ --fs-base: 19px; /* 旧 17px × 1.25 = 21.25，取 21px：小标题、卡片标题，与正文维持 2px 落差 建立层级，又不至于抢主标题的注意力。 */ --fs-md: 21px; /* 旧 20px × 1.25 = 25px 整：区块标题（一个内容区一个）。 */ --fs-lg: 25px; /* 旧 26px × 1.25 = 32.5，取 32px：页面主标题。 */ --fs-xl: 32px; /* 旧 34px × 1.25 = 42.5，取 42px：首屏英雄区大标题。1360 版心下一行约 32 个汉字（1360/42≈32），主标语 20 字内配副标题可以两行收住，不会把首屏 撑到需要滚动才看到 CTA。 */ --fs-2xl: 42px; /* 旧 40px × 1.25 = 50px 整：KPI 大数字。等宽字体下每位约 30px（0.6em）， 6 位「12,345」= 约 180px，已经贴到 208px 宽的 KPI 卡片内宽；超过 6 位 必须加 .num-long（见文件末尾），否则会被卡片的 overflow:hidden 裁掉。 */ --fs-num: 50px; /* 旧 11.5px × 1.25 = 14.4，取 14px：内联 SVG 里的坐标轴刻度专用，比正文 下限还小一档，单独成格。它只服务图形内部（admin.css 的 --ck-fs-axis）， 不允许拿去排正文。实际生效的是后台那一档 11.5px（见 body.admin）：刻度 排在水印般固定的 viewBox 坐标里，放大就会相邻日期粘连；这里按 1.25 倍 写成 14px，是留给前端将来做 SVG 图表时的默认刻度。 */ --fs-chart: 14px; /* ---------- 行高 ---------- */ /* 1.3：大字号标题用，行距收紧才像一个整体 */ --lh-tight: 1.3; /* 1.65：正文默认。字号从 15px 提到 19px 后，同样的 1.7 倍会得到 32.3px 行距， 比旧版 25.5px 多出 27%，段落会散；收到 1.65 => 31.35px，绝对行距仍比旧版 宽 23%，视觉上同步变大，但不至于把三行文字拉成一块留白。 */ --lh-base: 1.65; /* 1.8：长文阅读区（协议、关于我们、FAQ）用。旧 1.9×15=28.5px，若沿用倍率 是 36px 行距，太长；1.8×19=34.2px，比旧版宽 20%，与字号增幅一致。 */ --lh-loose: 1.8; /* ---------- 间距 ---------- */ /* 小间距 4/8/12/16 不动：它们是控件内部贴合尺寸（图标与文字、按钮内边距、 表格单元格），字号放大 25% 已经让它们相对变紧，再放大只会把按钮撑变形、 把并列小标签挤成两行。 大间距 24/32/48/64 按 ×1.25 放宽到 32/40/56/80：这些是区块与区块之间 的呼吸区，不跟着放大，页面会显得「字大而局促」。 */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 32px; --sp-6: 40px; --sp-7: 56px; --sp-8: 80px; /* ---------- 版心 ---------- */ /* 旧 1280。字号放大 25% 后，同样行宽装得下的字少了 20%，1280 版心会变成 65 字/行的窄栏；放宽到 1360 后，在 1440 及以上视口里是 (1360-56)/19≈69 字/行，回到舒适区间，又不会宽到需要左右甩头。 */ --w-page: 1360px; /* 长文页专用。旧 880/15≈58 字；新 940/19≈49 字，比旧档短 9 字，仍在「一段 不用回扫两次」的范围。没有再往 1000+ 放，是因为长文页与主版心 1360 的 差距一旦缩小，窄栏就失去「限制行长」的意义。 */ --w-narrow: 940px; /* 页面左右内边距：大屏 24~32，小屏收到 16 把横向空间还给内容。 它不随字号放大：边距是留白，不是文字。 */ --pad-x: 24px; } /* ========================================================================== 断点覆写（必须留在文件末尾） ========================================================================== */ /* 手机。正文 17px 是硬上限：390 宽机型的可用宽度约 358px（390-16×2）， 17px 一行正好 21 个汉字，是「一行装得下 20 字」的下限；按 1.25 倍应该是 18.75px，那样一行只剩 19 字，中文会碎成片段。所以窄屏只放到 1.13 倍， 并同步压低 xs/sm/md 三档，保证 xs < sm < base 的层级不倒挂。 --pad-x 收到 16px：390 宽下 24px 边距要吃掉 12% 的横向空间。 */ @media (max-width: 768px) { :root { --fs-xs: 14px; --fs-sm: 16px; --fs-base: 17px; --fs-md: 19px; --fs-lg: 22px; --fs-xl: 28px; --fs-2xl: 34px; --fs-num: 40px; --fs-chart: 12px; --w-page: 100%; --pad-x: 16px; } } /* 1024~1279：笔记本与分屏。整宽铺开，去掉居中白边，表格列不至于被挤到换行。 正文 18px（旧档 15px 的 1.2 倍）：这一档可用宽度只有 976px 左右，按 1.25 倍 放到 19px 会让 1024 宽的老笔记本一行只剩 51 字，且与手机档 17px 之间没有 过渡；18px 既大于手机档、又小于宽屏档，递减关系不乱。 */ @media (min-width: 1024px) and (max-width: 1279px) { :root { --fs-sm: 17px; --fs-base: 18px; --w-page: 100%; } } /* 1440~1599：基准区间。这里显式写一遍，是为了不让 1024~1279 档的 --w-page: 100% 和 --fs-sm: 17px 因为变量继承而漏到这一档（变量不会自动回退）。 */ @media (min-width: 1440px) and (max-width: 1599px) { :root { --fs-sm: 18px; --fs-base: 19px; --w-page: 1360px; --pad-x: 28px; } } /* ≥1600：对应 1920×1080 且不缩放的情况。逻辑宽 1920 时 19px 正文只占屏宽 0.99%，比 1280 视口下显得更小，所以正文补到 20px（旧档同位置是 16px， 同比 +25%），版心从 1360 放到 1440 —— (1440-64)/20≈69 字/行，与 1440~1599 档的 69 字/行对齐，两侧也不会空出 240px 一条白带。 */ @media (min-width: 1600px) { :root { --fs-base: 20px; --w-page: 1440px; --pad-x: 32px; } } /* ========================================================================== 后台单独收一档 后台是十几列的数据表，19px 正文会把表头挤到折行，列宽不够时浏览器只能 压缩到最小内容宽度，结果整张表横向滚动 —— 比字小更难用。所以后台只提 到 1.07 倍：正文 16px（旧 15px × 1.07），表头与表格正文 15px，辅助说明 14px。行高同步收到 1.6：16px × 1.6 = 25.6px，与旧版 15px × 1.7 = 25.5px 几乎相同，后台的行密度不因本次改版而变化。 唯一不跟着放的是 --fs-chart：后台图表的坐标轴刻度画在 552 宽的固定 viewBox 里（admin.css 用 --ck-fs-axis 引用它），刻度是按 viewBox 坐标排的，不随 浏览器字号变化；admin.css 的注释里记着「13px 会让相邻日期粘成 10-2810-29」， 所以这一档保持 11.5px 原值 —— 放大字号是全局诉求，但不能以刻度糊成一片为代价。 body.admin 在 :root 之后取值，子孙元素一律命中这里，无需 !important。 ========================================================================== */ body.admin { --fs-xs: 14px; --fs-sm: 15px; --fs-base: 16px; --fs-md: 18px; --fs-lg: 21px; --fs-xl: 26px; --fs-2xl: 32px; --fs-num: 34px; --fs-chart: 11.5px; --lh-base: 1.6; } /* ========================================================================== KPI 长数字降级 50px 等宽数字每位约 30px：6 位「12,345」= 约 180px，已经贴到 208px 宽的 卡片内宽（.db-kpi 有 overflow:hidden，超出的部分会被直接裁掉而不是撑开）； 「1,234,567」8 位约 240px 必然出界，「1,234,567.89」13 位约 390px。 这类数字在视图里加 .num-long，降到 --fs-xl（32px，每位约 19px，8 位 ≈ 154px）。 !important 是必要的：.adm-stat b / .db-kpi-num 这类选择器特异性高于单个类， 不加会被它们盖回去。 ========================================================================== */ .num-long { font-size: var(--fs-xl, 32px) !important; letter-spacing: -.3px; }