VUE_自适应布局lib-flexible+postcss-pxtorem、lib-flexible + postcss-px2rem，nuxt页面自适配

在Vue项目中，自适应布局通常使用lib-flexible库结合postcss-pxtorem或postcss-px2rem插件来实现。

1. lib-flexible：这是一个用于设置 rem 布局的库，它会根据屏幕宽度动态调整根字体大小。
2. postcss-pxtorem：一个PostCSS插件，用于将像素单位转换成rem单位。
3. postcss-px2rem: 一个PostCSS插件，用于将像素单位转换成rem单位。

安装依赖

npm install lib-flexible --save

对于postcss-pxtorem或postcss-px2rem，选择其一进行安装：

npm install postcss-pxtorem --save-dev
# 或者
npm install postcss-px2rem --save-dev

配置postcss-pxtorem或postcss-px2rem

在postcss的配置文件postcss.config.js中，配置相关选项：

module.exports = {
  plugins: {
    autoprefixer: {},
    'postcss-pxtorem': {
      rootValue: 37.5, // 设计稿宽度/10，这里以设计稿宽度为375px为例
      propList: ['*'], // 需要转换的属性，这里选择转换所有属性
    },
    // 或者使用 postcss-px2rem
    'postcss-px2rem': {
      rootValue: 37.5, // 设计稿宽度/10，这里以设计稿宽度为375px为例
      propList: ['*'], // 需要转换的属性，这里选择转换所有属性
    },
  },
};

配置lib-flexible

在项目入口文件main.js中引入lib-flexible：

import 'lib-flexible/flexible'

注意：

• 确保lib-flexible在项目中首先引入，以保证根据屏幕宽度动态调整根字体大小的特性。
• 在postcss-pxtorem或postcss-px2rem的配置中，rootValue通常设置为设计稿宽度的1/10，这样可以使得计算更加方便。
• 在使用时，选择其中一个插件进行配置，并确保在postcss.config.js文件中正确配置。

以上步骤完成后，你的Vue项目就可以使用rem单位进行自适应布局设计了。