Vue ページは、PC 側のさまざまな解像度とサイズに適応します

1. 必要なプラグイン

  vue プロジェクトに px2rem-loaderとpostcss-px2rem の2 つのプラグインをインストールします。ここでは npm を使用してインストールします。

npm install px2rem-loader -S
npm install postcss-px2rem -S

2. アダプティブ JS ファイルを導入する

  プロジェクトが JS を格納するファイル ディレクトリで、新しい pxrem.js ファイルを作成し、それを main.js にインポートします。

//pxrem.js文件代码如下：

const baseSize = 16
// 设置 rem 函数
function setRem () {
  // 页面宽度相对于 2048宽的缩放比例，根据需要修改。
  const scale = document.documentElement.clientWidth / 2048
  // 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，根据需要修改）
  document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
  setRem()
}

//main.js中引入

import '@/assets/js/pxrem.js'

3. vue.config.js で構成する

    vue.config.js ファイルがない場合は、vue プロジェクトのルート ディレクトリに作成し、vue プロジェクトを再実行して有効にします。具体的な構成は次のとおりです。 

const px2rem = require('postcss-px2rem')
// 配置基本大小
const postcssRem = px2rem({
  // 基准大小 baseSize，需要和rem.js中相同
  remUnit: 16
})
module.exports = {
	publicPath: "./",
	  lintOnSave: true,
	  css: {
	    loaderOptions: {
	      postcss: {
	        plugins: [
	          postcssRem 
	        ]
	      }
	    }
	}
}

4. 注意事項

    上記のインストールと設定が完了すると, ページは自己適応することができます. ページ スタイル css では, px の単位は自動的に rem の単位に変換されます. ブラウザの開発者ツール F12 で確認できます. 実際には, px は rem に変換されました。

   注: css に必ず記述してください. 行に記述されたスタイルは rem 単位に変換されません. 一部のスタイルが有効にならない場合は、!import を追加する必要があります. 一部の css スタイルに変換したくない場合rem、対応する css に追加できます。その後に /*no*/ を追加します。