CSS技术问题：响应式字体大小在Safari浏览器中未正常呈现响应效果

嘿，我碰到过类似的Safari移动端排版坑，来帮你捋一捋！

从你描述的情况来看，核心问题很可能出在相对单位的继承链差异上——虽然你在两个CSS文件里写了完全一样的font-size: 80%;，但这个百分比是相对于父元素的字体大小计算的。如果首页和内容页中菜单的父容器（比如<body>、.menu-pane的上层元素）的font-size设置不一样，那最终渲染出来的菜单字体大小自然会有区别，而Safari移动端对相对单位的处理又比其他浏览器更“严格”，所以就只在它这里暴露了问题。

给你几个针对性的解决方案：

1. 替换相对单位为视窗单位（vw） #

把font-size: 80%;改成基于视窗宽度的vw值，这样就完全脱离了父元素的继承影响，两个页面的菜单字体大小会完全一致。比如：

.menu-pane li {
  padding-top: 1.8vw;
  padding-bottom: 0.1vw;
  margin-left: 1vw;
  font-size: 2.4vw; /* 根据你的需求调整数值，确保和原80%效果匹配 */
  font-family: 'Josefin Sans', sans-serif;
}

2. 强制Safari禁用自动字体缩放 #

Safari移动端默认会对小字体进行自动放大，你可以添加CSS属性强制关闭这个行为：

.menu-pane li {
  padding-top: 1.8vw;
  padding-bottom: 0.1vw;
  margin-left: 1vw;
  font-size: 80%;
  font-family: 'Josefin Sans', sans-serif;
  -webkit-text-size-adjust: 100%; /* 禁止Safari自动调整字体大小 */
}

3. 检查父元素的字体大小设置 #

打开浏览器开发者工具（Safari移动端可以通过Mac的Safari远程调试），分别查看首页和内容页中.menu-pane的直接父元素的font-size值。如果发现两者不一样，统一设置父元素的字体大小就能解决问题。比如给.menu-pane本身设置一个固定的vw字体大小：

.menu-pane {
  font-size: 3vw; /* 作为子元素80%的基准值 */
}

.menu-pane li {
  padding-top: 1.8vw;
  padding-bottom: 0.1vw;
  margin-left: 1vw;
  font-size: 80%;
  font-family: 'Josefin Sans', sans-serif;
}

4. 使用rem单位统一字体规则 #

如果你的网站整体响应式排版需要更稳定的控制，可以用rem单位：

/* 在全局CSS中设置根元素字体大小 */
html {
  font-size: 62.5%; /* 让1rem = 10px，方便计算 */
}

/* 菜单样式 */
.menu-pane li {
  padding-top: 1.8vw;
  padding-bottom: 0.1vw;
  margin-left: 1vw;
  font-size: 1.6rem; /* 相当于16px，根据原效果调整 */
  font-family: 'Josefin Sans', sans-serif;
}

先试试第一种方案，替换成vw单位应该能快速解决差异问题，毕竟它不依赖任何继承关系，两个页面的计算逻辑完全一致。如果还有问题，再检查父元素的字体设置或者添加禁用缩放的属性~

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