vue 怎么实现rem
实现 rem 适配的方法
在 Vue 项目中实现 rem 适配，可以通过动态设置根元素的字体大小并结合 CSS 预处理器或 PostCSS 插件来完成。
安装 postcss-pxtorem 插件
安装 postcss-pxtorem 插件，用于将 px 单位自动转换为 rem 单位：
npm install postcss-pxtorem --save-dev在项目根目录下的 postcss.config.js 文件中配置插件：
module.exports = {
plugins: {
'postcss-pxtorem': {
rootValue: 16, // 基准值，1rem = 16px
propList: ['*'], // 转换所有属性
selectorBlackList: [], // 不转换的选择器
replace: true,
mediaQuery: false,
minPixelValue: 0
}
}
}动态设置根字体大小
在项目的入口文件（如 main.js）中动态设置根元素的字体大小：
function setRem() {
const baseSize = 16; // 基准值
const scale = document.documentElement.clientWidth / 1920; // 设计稿宽度为1920px
document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px';
}
setRem();
window.addEventListener('resize', setRem);在组件中使用 rem
在 Vue 组件的样式中直接使用 rem 单位：
.container {
width: 10rem; /* 转换为 160px（基于16px基准值） */
height: 5rem; /* 转换为 80px */
}使用 lib-flexible 库
另一种方法是使用 lib-flexible 库来自动处理 rem 适配：
npm install lib-flexible --save在 main.js 中引入：
import 'lib-flexible/flexible';在 postcss.config.js 中配置 postcss-pxtorem：
module.exports = {
plugins: {
'postcss-pxtorem': {
rootValue: 75, // 1rem = 75px（lib-flexible的默认基准值）
propList: ['*']
}
}
}注意事项
- 设计稿的尺寸通常以 1920px 或 750px 为标准，需根据实际情况调整基准值。
- 避免在不可缩放的元素（如边框）上使用 rem 单位。
- 测试不同屏幕尺寸下的显示效果，确保适配正常。
