vue 怎么实现rem
实现 Vue 中的 rem 适配方案
在 Vue 项目中实现 rem 适配，通常需要结合 postcss-pxtorem 插件和动态设置根字体大小的逻辑。以下是具体实现方法：
安装 postcss-pxtorem
通过 npm 或 yarn 安装 postcss 插件：
npm install postcss-pxtorem -D
# 或
yarn add postcss-pxtorem -D配置 postcss-pxtorem
在项目根目录的 postcss.config.js 中配置插件（若无此文件则新建）：
module.exports = {
plugins: {
'postcss-pxtorem': {
rootValue: 16, // 设计稿宽度/10（如设计稿为750px，则设为75）
propList: ['*'], // 转换所有属性的px单位
selectorBlackList: [/^html$/], // 避免html标签被转换
},
},
};动态设置根字体大小
在入口文件（如 main.js）或公共样式文件中添加以下代码：
function setRem() {
const baseSize = 16; // 与postcss配置的rootValue一致
const scale = document.documentElement.clientWidth / 375; // 以375px设计稿为基准
document.documentElement.style.fontSize = baseSize * scale + 'px';
}
window.addEventListener('resize', setRem);
setRem();设计稿开发注意事项
- 直接按设计稿像素值编写样式（如
width: 750px），插件会自动转换为 rem。 - 如需忽略某些属性的转换，可通过
propList配置排除。
可选：使用 lib-flexible 库
对于需要兼容老版本的项目，可以引入 lib-flexible：
npm install lib-flexible -S在 main.js 中引入：
import 'lib-flexible';注意：此方案需搭配 postcss-pxtorem 使用，且可能需调整插件配置以匹配 lib-flexible 的转换逻辑。
验证配置
- 检查编译后的 CSS 中 px 是否被转换为 rem。
- 调整浏览器窗口大小时，观察
html标签的font-size是否动态变化。
