关于高分屏的缩放探讨。其实就几行代码

目前的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：你来说

大家讨论用哪种方案，然后期待作者直接集成。（毕竟现在高分屏和普屏也很多）