rem adaptation method

Principle: Convert px to rem, and scale the page to fit the large screen through setRem

1. Global configuration setRem

1. Set scaling: file 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 configuration

import './utils/rem' import

2. A single component references 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"
    },
}

Set px conversion rem

1. npm plugin postcss

1). Installation

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

2). Create postcss.config.js file and configure

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

3). Introduced in main.js

import 'postcss-import'

2. scss function conversion

$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. Subcomponent issues

When the large screen is referenced as a subcomponent, window.onresize will fail

You can use <iframe> to import the route of this project to import the display

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

src is the already set route:

For example:

This is src can be '/tree'

{
path: '/tree',
name: 'tree',
component: (resolve) => require(['@/view/test/tree'], resolve),
meta:{keepAlive:true},
},

Vue large screen adaptation zoom