VueのPXは自動的レムに変換しました

Vueのがされてpx自動的に変換rem、直列構成により、図開発プロジェクトの開発・設計に直接使用することができるサイズが自動的にコンパイルされ、変換されましたrem

ルートHTMLの自動的に設定フォントサイズ

REMは、单位フォントサイズに対するルートノードであるルートノードを設定することにより、フォントサイズを動的に変更することができるremのサイズを

作成1. rem.jsファイルを

// 基准大小
const baseSize = 32
// 设置 rem 函数
function setRem () {
  // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
  const scale = document.documentElement.clientWidth / 750
  // 设置页面根节点字体大小
  document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
  setRem()
}

2、main.jsで紹介rem.js

import './assets/js/rem';

ファイルの導入後、自動的に追加のフォントサイズがあるかどうか、ページのHTMLノードを参照してください。

REMのレイアウトを達成することである。このステップ、実際の開発時間、または我々はレムの開発に対応する値を計算する必要がありますを完了するために

外観パッケージを設定し、自動的に対応するピクセル値レムに変換

インストールpostcss-pxtorem PXは自動的レムに変換しました

$ npm install postcss-pxtorem -D

ルートファイルpackage.jsonを変更

"postcss": {
    "plugins": {
      "autoprefixer": {},
      "postcss-pxtorem": {
        "rootValue": 32,
        "propList": [
          "*"
        ],
        "selectorBlackList": [
          "mint-",
          "picker-",
          "mt-"
        ]
      }
    }
  }

設定が完了すると、プロジェクト内で直接使用することができますpx開発