如何在Safari中仅用CSS实现随浏览器缩放响应的视口相对字号

可以仅通过CSS实现，核心思路是避开直接给font-size使用vh单位，转而绑定已经能正常响应浏览器缩放的导航高度作为尺寸参照，绕过Safari的vh单位适配bug。

你可以选择以下两种方案，根据你的兼容需求选择即可：

方案1：基于行高单位实现（兼容性更好，Safari 15.4及以上支持） #

你原本定义的导航高度在Safari中本身是可以正常响应窗口大小、浏览器缩放变化的，我们将行高和导航高度设为一致，再用lh单位把字体大小和行高做比例绑定即可：

.header-nav {
    ...
    position: fixed;
    height: min(10vh, 50px);
    line-height: min(10vh, 50px);
    /* 15%的比例对应你原本1.5vh/10vh的占比，可根据需求自行调整 */
    font-size: min(15% * 1lh, 16px);
    ...
}

方案2：基于容器查询单位实现（逻辑更直观，Safari 16及以上支持） #

给导航开启容器查询后，直接用容器高度单位cqh定义字体大小，cqh会跟随导航容器的高度实时变化，不受Safari的vh单位bug影响：

.header-nav {
    ...
    position: fixed;
    height: min(10vh, 50px);
    /* 开启容器尺寸查询 */
    container-type: size;
    ...
}

/* 导航内所有文字的尺寸绑定容器高度 */
.header-nav * {
    /* 1cqh等于导航高度的1%，15cqh对应你原本1.5vh的需求 */
    font-size: min(15cqh, 16px);
}

两种方案都可以实现字体大小同时响应窗口调整、浏览器缩放变化，不会出现阶梯跳变，也不需要写大量媒体查询冗余代码。

内容的提问来源于stack exchange，提问作者Doug