如何在CSS中设置匹配移动设备系统默认（含无障碍缩放）的字体大小？

这个问题我之前也踩过坑，核心就是要让网页字体完全同步设备系统的默认字体大小，同时响应用户在系统设置里开启的无障碍缩放，之前用100%和medium不行的原因，以及正确的解决方法，我来详细说下：

为什么之前的方法失效？ #

• font-size: 100%的问题：它的基准是父元素的字体大小，而非系统的根字体大小。如果父元素没有显式设置，它会继承浏览器的默认值，但浏览器默认值不一定和设备系统的字体大小完全对齐，再加上不同设备的像素密度、屏幕尺寸差异，就会出现渲染不一致的情况。
• font-size: medium的问题：这是浏览器内置的关键字，对应的是浏览器自身定义的"medium"尺寸，大部分情况下不会联动系统的无障碍缩放设置——也就是说，哪怕用户把系统字体放大了，网页里的medium字体可能还是保持原来的大小。

正确的实现方案 #

核心思路是用rem单位绑定系统根字体大小，具体步骤如下：

1. 确保viewport标签正确（你已经设置了，这点很重要）：

   <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
   

   这个标签让网页视口和设备物理尺寸正确关联，是rem单位能正确映射系统设置的前提。

2. 让根元素继承系统字体大小：
   在移动端媒体查询里，给html（根元素）设置font-size: 100%;，这样根元素的字体大小就会完全继承设备系统的默认值，包括用户设置的无障碍缩放比例：

   @media (max-width: 600px) {
     html {
       font-size: 100%; /* 关键：跟系统字体大小及缩放完全同步 */
     }
   }
   

3. 用rem设置页面文本大小：
   对于页面中的文本元素（比如p、标题等），直接用rem作为单位，或者不设置让它继承根元素的大小：

   @media (max-width: 600px) {
     html {
       font-size: 100%;
     }
     p {
       font-size: 1rem; /* 等同于系统默认字体大小，自动跟随缩放 */
     }
     h1 {
       font-size: 2rem; /* 是系统默认的2倍，同样响应缩放 */
     }
   }
   

   这里的1rem就等于根元素的字体大小，只要根元素同步了系统设置，所有用rem定义的元素都会自动跟着系统缩放。

验证方法 #

你可以在设备的系统设置里调整字体大小（比如拉到最大缩放级别），刷新网页后如果文本同步放大/缩小，就说明设置生效了。

另外补充个小细节：部分浏览器有默认最小字体限制（比如Chrome的12px），但当用户开启无障碍缩放时，这个限制通常会被自动忽略，不需要额外处理。

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