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

lib-flexible + postcss-pxtorem适配

我采用的是flexable.js和postcss-pxtorem。我一开始用的是postcss-px2rem后来发现和nuxt引入公共css的时候发生了冲突所以改用了postcss-pxtorem。

安装依赖

npm i lib-flexible -S
npm install postcss-pxtorem --save

1、lib-flexible.js文件

2、再在nuxt.config.js里面配置plgins配置项

{src:'@plugins/lib-flexible.js',ssr:false}

3、引入postcss-pxtorem

postcss: {
  plugins: {
    "postcss-pxtorem": {
      rootValue: 192,
      propList: ["*"],
      minPixelValue: 2
    }
  }
},

4、因为是pc端自适应，所以在 node_modules 文件夹下找到 lib-flexible文件中的 flexible.js

lib-flexible + postcss-px2rem适配

自测在使用element-ui时会和公共css库起冲突

安装依赖

npm i lib-flexible -S
npm i px2rem-loader -D
npm install postcss-px2rem save

 安装后执行上面（1、2、3、4）步骤

plugins: [
    {src:'@plugins/lib-flexible.js',ssr:false}
],

build: {
  postcss: [
    require('postcss-px2rem')({
      remUnit: 192  // 之所以写192是因为设了pc最大宽度1920px
    })
  ],
}

vue项目适配pc

安装依赖

npm i lib-flexible -S
npm install postcss-pxtorem --save

配置postcss.config.js文件，如没有，新建

module.exports = {
    plugins: {
        autoprefixer: {},
        'postcss-pxtorem': {
            rootValue: 192,
            propList: ['*'],
        },
    },
};

main.js文件里面引用lib-flexible

import 'lib-flexible'

后执行上面（4）步骤，修改width

nuxt3适配：https://www.jianshu.com/p/fd9e9adbd649

..

.