每个人都可以，
拥有SSL证书

最近有个 uni-app vue3 的项目，设计稿给的是 1366×1024 的平板尺寸，要求页面自适应。不想再额外装插件了，就直接用 rem 方案手动搞了一套。

这里把做法记一下。

在入口文件或者 App.vue 里塞一段动态设置根字体大小的逻辑。我直接把代码贴出来：

function setRem() {
  const baseSize = 16;
  const scale = document.documentElement.clientWidth / 1366;
  document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px';
}

setRem();
window.addEventListener('resize', setRem);

baseSize 取 16 是因为浏览器默认字体大小一般就是 16px，后面换算会省事一点。

scale 算的是当前屏幕宽度相对于设计稿宽度的比例，1366 是设计稿的宽。把 scale 交给根元素的 font-size，所有用 rem 的地方就会跟着屏幕宽度等比缩放。

Math.min(scale, 2) 这个地方其实有个小坑。如果屏幕特别宽，比如接了个 4K 显示器，scale 能跑到 3 甚至更高，字体就大得没法看了。限一下最大放大倍数是 2，既能适配宽屏，又不至于太夸张。如果你有特殊需求这个上限可以自己调。

监听了 resize 事件，窗口大小变化的时候自动重新算一次，保证不管怎么拖拽浏览器，布局都能跟上。

CSS 里用 rem 就简单了。设计稿上量的尺寸，除以 16 就是 rem 的值。比如一个宽 100px 的元素：

.element {
  width: 6.25rem; /* 100 / 16 */
  height: 3.125rem; /* 50 / 16 */
}

因为基准是 16，设计稿上任何 px 数直接除以 16 就行。字体也一样，24px 的标题写成 1.5rem。

有些小伙伴会纠结怎么自动换算，uni-app 里写 CSS 用不了太复杂的预处理器，手算也还行。

如果你觉得算着烦，可以在 vscode 里装个 px to rem 的插件，设置一下基准是 16，一键转换。但核心还是自己心里清楚这个换算关系，调试的时候不至于懵。

页面写完之后，用 Chrome DevTools 把宽度拖到 1366px，这时候 1rem 就是 16px，元素尺寸跟设计稿一模一样。

再拖到 683px（一半宽度），1rem 自动变成 8px，同样的 6.25rem 就渲染成 50px 宽，整个页面等比缩小，没有被挤压或者留白，自适应效果就出来了。

有一个前提得保证：index.html 里要有 viewport 的 meta 标签。uni-app 脚手架通常已经默认加好了，但自己确认一下总没错：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

少了这行在移动端渲染会出问题，rem 再算都白搭。

之前也试过一些现成的 postcss 插件来做 rem 适配，但有时候跟 uni-app 的编译流程打架，调试半天。直接手写这段 js 加几行 CSS 换算，反而最稳，也没引入额外依赖，项目体积没变化。

就这样，一个基于 rem 的自适应布局就搭起来了。如果你也在用 uni-app vue3 做类似的设计稿，这套方案可以直接拿走。