首页vue3 postcss-pxtorem lib-flexi

vue3 postcss-pxtorem lib-flexi

时间: 2025-02-19 15:32:05 浏览: 22

Vue3 中使用 `postcss-pxtorem` 和 `lib-flexible` 实现移动端适配

安装依赖库

为了使项目能够支持移动端的 px 到 rem 的自动转换，需先安装必要的工具包。

npm install lib-flexible postcss-pxtorem --save-dev

此命令会下载并安装两个主要的依赖项：用于动态调整页面基础字体大小的 lib-flexible 库和负责将样式表中的 px 单位转为 rem 单位的 PostCSS 插件 postcss-pxtorem[^1]。

配置 PostCSS

接着，在项目的根目录创建或编辑现有的 postcss.config.js 文件来定义 PostCSS 处理器及其选项：

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 75, // 设计稿宽度除以10后的数值作为rootValue
      propList: ['*'], // 对所有的属性应用转换
      selectorBlackList: ['.ignore', '.hairlines'], // 排除某些类名下的元素不做处理
      minPixelValue: 2,
      mediaQuery: false
    }
  }
};