vue3项目中单个页面自适应：巧妙实现px到rem转换

在开发Vue3管理系统时，经常会遇到需要将某个页面（例如首页大屏）实现自适应的需求。 这通常意味着需要将设计稿中的PX单位转换为REM单位，以便页面能够根据不同分辨率自动调整大小。 直接使用全局的PX转REM插件（例如@njleonzhang/postcss-px-to-rem或postcss-pxtorem）可能会影响整个项目的UI框架，导致样式错乱。 那么，如何只针对单个页面实现PX到REM的转换呢？

一种有效的方法是利用JavaScript动态计算根元素的字体大小。 我们可以通过获取页面宽度，并以一个基准宽度（例如375px）进行比例计算，来动态设置html元素的font-size。 这样，页面中使用PX单位的元素就能自动转换成相应的REM单位。

具体实现如下： 首先，在你的Vue组件的mounted生命周期钩子函数中，使用jQuery（或其他类似的库）获取页面的宽度。 然后，根据基准宽度计算出根元素的字体大小，并将其设置为document.documentElement.style.fontSize。 这里假设基准宽度为375px，并且希望在基准宽度下，根元素的字体大小为10px。

vue-composition-api-best-practices

Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。

下载

mounted() {
  let appWidth = $('#app').width();
  let size = (appWidth / 375) * 10;
  document.documentElement.style.fontSize = size + 'px';
},

这段代码会根据页面宽度动态计算并设置html元素的font-size。 请注意，你需要根据你的项目实际情况修改基准宽度（375）和基准字体大小（10px）。 在你的页面中，所有使用PX单位的样式都将自动转换为REM单位，从而实现自适应效果。 此外，建议在你的VS Code中安装px2rem插件，辅助进行单位转换，提高效率。 记住，在首页组件中使用此方法，并且确保页面中的所有PX单位都已正确转换为REM单位或相对单位。

立即学习“前端免费学习笔记（深入）”；