目前的14px在普通屏(100%)上显示没问题。
在高分屏上显示就很小很难受,虽然是可以写个插件可自动适配,但这就几行代码就能实现的。大家来讨论一下:方案A:媒体查询 + 分段覆盖
/* 基础字号(普通屏) */ :root { --step-0: 0px; /* 增量基数 */ --font-size-md: calc(14px + var(--step-0)); --font-size-lg: calc(16px + var(--step-0)); --font-size-xl: calc(18px + var(--step-0)); --font-size-sm: calc(12px + var(--step-0)); --font-size-xs: calc(11px + var(--step-0)); } /* 150% 缩放 */ @media (min-resolution: 144dpi) and (max-resolution: 191dpi) { :root { --step-0: 2px; } } /* 200% 缩放 */ @media (min-resolution: 192dpi) { :root { --step-0: 4px; } }精确控制 150%/200% 增量,不受窗口大小影响。需要媒体查询。
方案B:clamp() 实现高分屏自动增大字号
:root { --font-size-md: clamp(14px, 1rem + 0.5vw, 20px); --font-size-lg: clamp(16px, 1.2rem + 0.6vw, 24px); --font-size-xl: clamp(18px, 1.4rem + 0.8vw, 28px); --font-size-sm: clamp(12px, 0.9rem + 0.3vw, 16px); --font-size-xs: clamp(11px, 0.8rem + 0.2vw, 14px); }不需要媒体查询代码简洁。不能控制 150%/200% 增量,受窗口大小影响。
方案C:你来说
大家讨论用哪种方案,然后期待作者直接集成。(毕竟现在高分屏和普屏也很多)
主楼