vue大屏适配缩放

rem适配方式

原理: 将px转化成rem,通过setRem缩放页面适配大屏

一. 全局配置 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配置

import './utils/rem' 引入

二. 单个组件引用 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转换rem

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);
}

三.子组件问题

当大屏作为子组件引用时,window.onresize会失效

可以用<iframe>引入本项目的路由的方式引入展示

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

src为已经设置好的路由:

例如:

这是src可以为'/tree'

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