Vue怎么实现rem
Vue 中实现 rem 适配的方案
在 Vue 项目中实现 rem 适配，可以通过动态设置根元素的字体大小并结合 postcss 插件自动转换 px 为 rem。以下是具体实现方法：
安装 postcss-pxtorem 插件
通过 npm 或 yarn 安装 postcss-pxtorem 插件，用于将 CSS 中的 px 单位自动转换为 rem：
npm install postcss-pxtorem -D配置 postcss.config.js
在项目根目录下创建或修改 postcss.config.js 文件，配置插件参数：
module.exports = {
plugins: {
'postcss-pxtorem': {
rootValue: 16, // 设计稿宽度 / 10（如设计稿为 750px，则设为 75）
propList: ['*'], // 转换所有属性的 px 单位
selectorBlackList: [/^\.html/], // 忽略包含 .html 的类名
},
},
};动态设置根字体大小
在项目的入口文件（如 main.js）或公共 CSS 文件中，通过 JavaScript 动态计算根元素的 font-size：
function setRem() {
const baseSize = 16; // 基准值，与 postcss.config.js 的 rootValue 一致
const scale = document.documentElement.clientWidth / 1920; // 按设计稿宽度调整（如 1920px）
document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px';
}
setRem();
window.addEventListener('resize', setRem);在组件中直接使用 px
配置完成后，在 Vue 组件或 CSS 文件中直接使用 px 单位，构建时会自动转换为 rem：
.container {
width: 100px; /* 编译为 6.25rem（假设 rootValue 为 16） */
}注意事项
- 设计稿比例：确保
rootValue与设计稿宽度匹配。例如，设计稿为 750px 时，建议设为75（750/10）。 - 忽略转换：如需保留某些属性的
px单位，可通过selectorBlackList或注释/* px-to-rem-ignore */排除。 - Viewport 适配：结合
<meta name="viewport">设置，确保移动端显示正常：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
通过以上步骤，Vue 项目即可实现基于 rem 的响应式布局适配。
