レム適応法

原則: px を rem に変換し、setRem を通じて大きな画面に合わせてページを拡大縮小します。

1. グローバル構成 setRem

1. スケーリングを設定します: ファイル src/utils/rem.js

const baseSize = 16;
// 设置 rem 函数
function setRem() {
    // 当前页面屏幕分辨率相对于 1920宽的缩放比例，可根据自己需要修改
    const scale = document.documentElement.clientWidth / 3200;
    // 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
    document.documentElement.style.fontSize =
        baseSize * Math.min(scale, 2) + "px";
}
// 初始化
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function () {
    setRem();
};

2. main.jsの設定

インポート './utils/rem' インポート

2. 単一コンポーネントが setRem を参照する

// 创建时设置
created() {
    this.setRem()
    window.onresize =  () => {// 改变窗口大小是刷新
      return (() => {
        this.setRem()
      })()
    }
},
methods: {
    setRem() {
      const baseSize = 16
      // 当前页面屏幕分辨率相对于 1920宽的缩放比例，可根据自己需要修改
      const scale = document.documentElement.clientWidth / 3200
      // 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
      document.documentElement.style.fontSize =
          baseSize * Math.min(scale, 2) + "px"
    },
}

px変換レムの設定

1.npmプラグインpostcss

1). インストール

npm install postcss-pxtorem postcss-import --save-dev

2). postcss.config.js ファイルを作成し、設定します

module.exports = {
  plugins: {
    "autoprefixer": {},
    "postcss-pxtorem": {
      "rootValue": 16,//根节点字体的大小
      "propList": ["*"]
    }
  }
}

3). main.js で導入

import 'postcss-import'

2. scss関数の変換

$browser-default-font-size: 16px !default;//变量的值可以根据自己需求定义

html {
    font-size: $browser-default-font-size;
}

@function pxToRem($px){//$px为需要转换的字号
    @return $px / $browser-default-font-size * 1rem;
}

// 使用
.total-title {
    height:  pxToRem(300px);
}

3. サブコンポーネントの問題

大画面がサブコンポーネントとして参照されると、window.onresize が失敗します。

<iframe :src="src" style="height: 88vh;width: 100%;"></iframe>

src はすでに設定されているルートです。

例えば：

これは src に「/tree」を指定できます

{ パス: '/tree'、名前: 'tree'、コンポーネント: (resolve) => require(['@/view/test/tree']、resolve)、 meta:{keepAlive:true}, },

Vue の大画面適応ズーム