Vue px to rem 構成の詳細な説明

// 基本サイズ const baseSize = 32
// rem関数を設定する function setRem() {
  // 現在のページ幅を 750 幅に対して拡大縮小する比率。必要に応じて変更できます。
  定数スケール = document.documentElement.clientWidth / 750
  // ページのルートノードのフォントサイズを設定します。 document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// setRem() を初期化する
// ウィンドウサイズを変更するときに rem をリセットする
window.onresize = 関数 () {
  リセット()
}

'./config/rem' をインポートします

npm インストール postcss-pxtorem -D

モジュール.エクスポート = {
  プラグイン:
    自動プレフィックス: {},
    "postcss-pxtorem": {
      "ルート値": 16,
      "propList": ["*"]
    }
  }
}

npm i lib-flexible --save

npm で px2rem-loader をインストールします --save-dev

'lib-flexible/flexible' をインポートします

定数px2remLoader = {
    ローダー: 'px2rem-loader',
    オプション:
      rem単位: 37.5
    }
  ‹br>//generateLoaders メソッドに px2remLoader を追加します
1
定数ローダー = [cssLoader,px2remLoader]

モジュール.エクスポート = {
     チェーンWebpack: (config) => {
         構成モジュール
         .rule('css')
         .test(/\.css$/)
         .oneOf('vue')
         .resourceQuery(/\?vue/)
         .use('px2rem')
         .loader('px2rem-loader')
         .オプション({
             remUnit: 75 // 75 は 750 の設計案、37.5 は 375 の設計案を意味します})
     }
 }

<スタイル src='../assets/style.css'>
 /* px2rem は正常に変換できます*/
</スタイル>

<スタイル>
  /* px2rem は正常に変換できません */
  @import '../assets/style.css';
</スタイル>

<スタイル>
  /* px2rem は正常に変換できません */
  @import url('../assets/style.css');

</スタイル>

npm i amfe-flexible -S

npm をインストール postcss-pxtorem --save-dev

'amfe-flexible' をインポートする

モジュール.エクスポート = {
  プラグイン: {
    'postcss-pxtorem': {
      ルート値: 37.5,
      プロップリスト: ['*']
    }
  }
}