Vue PC とモバイル端末への適応を実装する方法を段階的に説明します。

1. 適応ソリューション (amfe-flexible + postcss-pxtorem)

amfe-flexible: 画面幅に応じて HTML のフォントサイズを自動的に設定します
postcss-pxtorem: px 単位を rem に自動的に変換します

2. プラグインをインストールする

​​​​​​​npm install postcss-pxtorem --save

npm install amfe-flexible --save

3. vue プロジェクトの main.js に lib-flexible を導入します

import 'amfe-flexible';

4.postcss -pxtoremの設定

vue.config.js、.postcssrc.js、postcss.config.jsのいずれかで設定可能で、左から右へ重みが小さくなりますので、新規ファイルがない場合はいずれか1つを設定するだけで済みます。

1. vue.config.jsで以下のように設定します

module.exports = {
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require('postcss-pxtorem')({
                        rootValue: 37.5,
                        propList: ['*']
                    })
                ]
            }
        }
    },
}

2. または、.postcssrc.js または postcss.config.js で次のように設定します。

module.exports = {
		    "plugins": {
		        'postcss-pxtorem': {
		            rootValue: 37.5,
		            propList: ['*']
		        }
		    }
		}

  注:
(1) rootValue は、デザイン ドラフトの幅を 10 で割った値に従って設定されます。ここでは、デザイン ドラフトが 375、つまり rootValue が 37.5 に設定されていると仮定します。

(2) propList は変換が必要なプロパティを設定するもので、ここではすべて * が変換されます。

5. 補足

エラーが発生した場合は、バージョンを下げて依存関係を再インストールしてください (package.json ファイル内のバージョンを次のように変更し、ターミナルでコマンド npm install を実行します)。

 "dependencies": {
    "amfe-flexible": "^2.2.1",
    "postcss-pxtorem": "^5.1.1",
  },

6. 設定が有効かどうかをテストする

1. CSS で特定のクラス名の幅を 375px に設定します。

.box{
  width: 375px;
}

2. 実行後、ブラウザで、rootValue 375/setting である 10rem に変換されたことがわかります。

3. 上記の状況は、postcss-pxtorem が正常に構成されたことを示しています。