Vue で PC 解像度の適応を実装するためのサンプルコード

npm インストール px2rem-loader -D
npm インストール lib-flexible -S

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

定数cssLoader = {
    ローダー: 'css-loader',
    オプション:
      ソースマップ: options.sourceMap
    }
  }

  // コード、px から rem 構成を追加 (px2remloader を loaders 配列に追加する必要があります)
  定数px2remLoader = {
    ローダー: 'px2rem-loader',
    オプション:
      remUnit: 192, //ビジュアルドラフトによると、remはpxの10分の1、1920px 192 rem
      // remPrecision: 8 // 変換後の rem に保持される小数点以下の桁数}
  }

// テキスト抽出プラグインで使用するローダー文字列を生成する
関数generateLoaders（ローダー、ローダーオプション）{
   const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]

   if (ローダー) {
     ローダー.push({
       ローダー: ローダー + '-loader',
       オプション: Object.assign({}, loaderOptions, {
         ソースマップ: options.sourceMap
       })
     })
   }
   //...
 }

関数refreshRem(){
   var 幅 = docEl.getBoundingClientRect().width;
    （幅 / dpr > 540）の場合{
        幅 = 幅 * dpr;
    }
    // スケーリング比率は実際の状況に応じて変更できます var rem = width / 8;
    docEl.style.fontSize = rem + 'px';
    フレキシブル.rem = win.rem = rem;
}