移动端 rem 适配方案（移动端浏览器 + Electron 双端兼容）

一、背景说明项目为一套代码多端运行同时部署H5 移动端浏览器、Electron 桌面客户端设计稿基准宽度375px采用postcss‑pxtorem将代码内px单位自动转换为rem实现屏幕自适应二、依赖安装# rem转换插件 npm install postcss-pxtorem # ts类型声明开发依赖 npm install -D types/postcss-pxtorem三、公共配置该配置在移动端、Electron 端都会执行 px→rem 转换转换规则统一环境区分交给前端JS代码控制。在移动端vite配置文件中配置css: { postcss: { plugins: [ postCssPxToRem({ rootValue: 37.5, // 设计稿宽度 / 10 375 / 10 propList: [*], // 所有属性px转rem }) ] } }⚠️注意如果只是移动端只设置这部分就可以实现适配electron双端还需要进行格外的配置。1、移动端浏览器环境配合 JS 动态设置根字号后1rem跟随屏幕宽度变化rootValue:37.5代表设计稿 375 宽下1rem 37.5px换算正常页面适配正常。2、Electron 渲染进程环境Electron 默认根字号固定为16px。 例CSS 写font‑size:16px→ 插件转换后0.4267rem实际渲染字号 0.4267 * 16 6.83px字体、元素尺寸整体缩小出现适配异常。四、Vite 构建配置区分electron双端环境变量Electron 端配置vite.electron.config.tspreload: { define: { IS_MOBILE: JSON.stringify(false) } },移动端 H5 配置vite.mobile.config.tspreload: { define: { IS_MOBILE: JSON.stringify(true) } },IS_MOBILE为编译期全局常量用于代码运行时判断当前运行平台。五、预加载脚本 preload 注入全局环境标识文件路径preload/index.tsconst appInfo { isMobile: IS_MOBILE }; if (process.contextIsolated) { try { contextBridge.exposeInMainWorld(appInfo, appInfo); } catch (error) { console.error(error); } } else { // ts-ignore (define in dts) window.appInfo appInfo; }六、平台导出封装Electron 平台文件platform/electron/index.ts/**应用环境信息 */ export const appInfo window.appInfo;H5 移动端平台文件platform/jsbridge/index.tsexport const appInfo { isMobile: IS_MOBILE };七、根字号自适应核心代码App.vue 入口仅移动端浏览器执行 rem 根字号计算Electron 桌面端跳过使用默认根字号script setup langts import { appInfo } from platform; /** * 设置html根字体大小实现rem自适应 * 设计稿基准宽度375px */ function setRootFontSize() { const designWidth 375; const fontSize (window.innerWidth / designWidth) * 37.5; document.documentElement.style.fontSize fontSize px; } // 判断为移动端H5环境开启rem适配 if (appInfo.isMobile) { setRootFontSize(); window.addEventListener(resize, setRootFontSize); } /script