Vue-cli3 PCエンドピクセルからリモートアダプティブへ

1. lib-flexibleをインストールします

yarn add lib-flexible

2. px2rem-loaderをインストールします

px2rem-loader

 3. flexible.jsを変更し、540を幅に変更します

4. main.jsにlib-flexibleを導入する

5. vue.config.jsを構成する

chainWebpack: (config) => {
        config.module
            .rule('scss')
            .oneOf('vue')
            .use('px2rem-loader')
            .loader('px2rem-loader')
            .before('postcss-loader') 
            .options({ remUnit: 192, remPrecision: 8 })
            .end();
  }

ここで、remUnitは設計ドラフトの幅です/ 10 remPrecisionは空の値remによって計算された精度値です

6.プロジェクトを再起動して完了です