UniApp Vue3中实现rem自适应布局：动态基准值与设计稿适配实践

深入探讨UniApp Vue3项目如何通过动态调整根元素字体大小，配合rem单位，实现基于设计稿（如1366*1024）的精确自适应布局。文章详细阐述关键JS代码注入、CSS样式定义及视口配置，助你无需插件打造高效响应式界面，确保各设备视觉一致性。

在HBuilder X创建的uniapp vue3项目中，若设计稿尺寸为1366*1024且希望使用rem单位而不依赖插件，可通过以下步骤实现自适应布局。

设置rem基准值

在App.vue或项目入口文件中，添加以下JavaScript代码来动态设置rem基准值。此代码会根据屏幕宽度调整根元素的字体大小，从而实现rem单位的自适应。

复制代码

function setRem() {
  const baseSize = 16; // 基础大小，可根据需要调整
  const scale = document.documentElement.clientWidth / 1366; // 1366是设计稿的宽度
  document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px';
}

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

代码解释 ： - baseSize：设置基础字体大小，这里设为16px，可根据项目需求调整。 - scale：计算当前屏幕宽度与设计稿宽度的比例。 - document.documentElement.style.fontSize：根据比例调整根元素的字体大小，从而影响rem单位的实际大小。 - window.addEventListener('resize', setRem)：监听窗口大小变化，重新计算rem基准值。零基础申请SSL证书使用lcjmSSL很方便。UniApp自适应布局。

编写CSS样式

在CSS中，使用rem单位来定义元素的尺寸。例如，若设计稿中某个元素的宽度为100px，则可将其转换为rem单位。

复制代码

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

代码解释： - 使用rem单位定义元素的宽度和高度，确保元素尺寸随rem基准值的变化而自适应。

处理设计稿尺寸

由于设计稿是基于1366*1024的平板页面，需确保在开发过程中，所有尺寸均按此比例进行转换。例如，若设计稿中字体大小为24px，则在CSS中应设置为1.5rem（24px / 16px = 1.5rem）。

响应式调整

上述JavaScript代码已包含窗口大小变化的监听，因此当屏幕尺寸发生变化时，rem基准值会自动调整，确保页面布局的自适应。

注意事项

确保在HTML文件的<head>部分添加了视口meta标签，以支持移动设备的自适应：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
在开发过程中，建议使用Chrome开发者工具等模拟不同屏幕尺寸，以验证rem单位的自适应效果。

实现效果对比

屏幕宽度	rem基准值	元素宽度（rem）	实际显示宽度（px）
1366px	16px	6.25rem	100px
683px	8px	6.25rem	50px

表格解释： - 当屏幕宽度为设计稿宽度1366px时，rem基准值为16px，元素宽度为6.25rem，实际显示宽度为100px。 - 当屏幕宽度减半为683px时，rem基准值自动调整为8px，元素宽度仍为6.25rem，但实际显示宽度减半为50px，实现自适应布局。