CSS 设置 rem 的小技巧

[inkjuncom]

<style>
  html {
    font-size: 26.666666667vw;
  }
  @media screen and (min-width: 768px) {
    html {
      font-size: 204.8px;
    }
  }
</style>

代码含义

• 基础设置： html { font-size: 26.666666667vw; }

• 使用视窗宽度（vw）作为单位， 26.666666667vw 约等于屏幕宽度的 1/3.75

• 在 375px 宽度的设备上，1rem 会等于约 100px（375px × 1/3.75 = 100px），方便后续使用 rem 单位进行布局

• 响应式限制： @media screen and (min-width: 768px)

• 当屏幕宽度大于等于 768px 时，将 html 的 font-size 固定为 204.8px

• 避免在较大屏幕上页面元素过度放大，保持桌面端显示的合理性

为什么放到 index.html 而不是 src/index.css

1. 优先加载，避免布局闪烁 内联样式会比外部 CSS 文件加载更早，可以防止页面在外部 CSS 加载完成前出现 "未样式化内容闪烁（FOUC）" 的问题

2. 基础适配的优先级 这是整个页面的基础适配规则，用于建立页面缩放的基准，需要在页面渲染的最早阶段就生效

3. 避免外部依赖问题 如果放到外部 CSS 文件中，可能会受到：

   • CSS 加载顺序的影响
   • 打包工具配置的限制
   • 网络延迟导致的加载顺序问题
     内联在 index.html 中可以确保其绝对优先级和正确应用

配置 pxToRem