vue项目屏幕自适应（有大屏）

一：后台相关网站

目前做项目都是基于1920*1080窗口大小

有的要求屏幕自适应

我一直这样子做，挺简单的，今天分享给大家

第一步安装一个包

 只在开发环境需要

第二步

在vue.config.js文件中加入以下内容（没有就创建一个，与src目录同级）

module.exports={

  css: {

         extract: false,//false表示开发环境,true表示生成环境

         sourceMap: false,

         loaderOptions: {

           postcss: {

             plugins: [

               require("postcss-px-to-viewport")({

                 unitToConvert: "px",    // 需要转换的单位，默认为"px"

                 viewportWidth: 1920,   // 视窗的宽度，对应pc设计稿的宽度，一般是1920

                 viewportHeight: 1080,// 视窗的高度，对应的是我们设计稿的高度,我做的是大屏监控,高度就是1080

                 unitPrecision: 3,        // 单位转换后保留的精度

                 propList: [        // 能转化为vw的属性列表

                   "*"

                 ],

                 viewportUnit: "vw",        // 希望使用的视口单位

                 fontViewportUnit: "vw",        // 字体使用的视口单位

                 selectorBlackList: [],    // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。

                 minPixelValue: 1,        // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换

                 mediaQuery: false,        // 媒体查询里的单位是否需要转换单位

                 replace: true,        // 是否直接更换属性值，而不添加备用属性

                 exclude: /(\/|\\)(node_modules)(\/|\\)/,        // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件

               })

             ]

           }

         }

       }    

  }

 然后重新启动项目

就ok了，f12查看，单位就变成vm了

缺点（只能转化style标签里的）

二：大屏显示自适应

大屏显示的话，就要根据客户屏幕占满整个屏幕，而且布局不能乱

这里采用公司前辈给的办法：css的transform: scale（）可用

ui给的设计稿是1920*1080但是这是一个大屏项目（只显示数据，没其他操作）

先按1920*1080把整个项目写好

在最外层组件，类似app组件，添加css属性

废话不多说，上代码

<template>
  <div class="wrap" ref="wrap">
    <div class="ScaleBox" ref="ScaleBox">
      <router-view />
    </div>
  </div>
</template>

<script>
export default {
  name: "ScaleBox",
  data() {
    return {
      scale: null,
      width: 1920,
      height: 1080,
      heightValue: 1080,
      widthValue: 1920,
    };
  },
  mounted() {
    // console.log(this);
    this.setScale();
    window.addEventListener("resize", this.setScale);
  },
  methods: {
    getScale() {
      const { width, height } = this;
      // console.log(window.innerWidth,window.innerHeight);
      let ww = window.innerWidth / width;
      let wh = window.innerHeight / height;
      // console.log(ww,"设备比1920");
      // console.log(document.documentElement.clientWidth,"设备");
      return ww < wh ? wh : ww;
      // return ww
    },
    setScale() {
      this.scale = this.getScale();
      this.$refs.ScaleBox.style.setProperty("--scale", this.scale); //设置指定键值对系统属性
      this.$refs.wrap.style.setProperty(
        "--heightValue",
        (this.scale * this.heightValue + 'px')
        // this.scale * this.heightValue
      );
      this.$refs.wrap.style.setProperty(
        "--widthValue",
         (this.scale * this.widthValue +'px')
      );
    },
  },
};
</script>

<style lang="less" scoped>
#ScaleBox {
  --scale: 1;
}
.wrap {
  width: var(--widthValue);
  height: var(--heightValue);
  background-color: #03304a;
  overflow: hidden;
}

.ScaleBox {
  width: 100%;
  height: 100%;
  transform: scale(var(--scale));
  transform-origin: 0 0;
}
</style>
<style>
::-webkit-scrollbar {
  /*隐藏滚轮*/
  display: none;
}
</style>

就是获取浏览器窗口大小，获得比例，（一般都是要宽度比例，让宽度100%占满）把整个组件进行缩放

最新修改

<template>
  <div class="app-wrap" ref="appWrapRef">
    <div class="scale-box" ref="scaleBoxRef">
      <RouterView></RouterView>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const width = ref(1920)
const height = ref(1080)
const appWrapRef = ref(null)
const scaleBoxRef = ref(null)
onMounted(() => {
  setScale()
  window.onresize = () => setScale()
})
function getScale() {
  let ww = window.innerWidth / width.value
  let wh = window.innerHeight / height.value
  console.log('window.innerWidth:', window.innerWidth, 'window.innerHeight:', window.innerHeight)

  console.log('ww:', ww, 'wh:', wh)

  return ww < wh ? ww : wh
  // return ww
}
function setScale() {
  let scale = getScale()
  scaleBoxRef.value.style.setProperty('transform', ` scale(${scale})  translate(-50%, -50%) `) //设置指定键值对系统属
}
</script>

<style lang="scss" scoped>
.app-wrap {
  position: relative;
  width: 100vw;
  height: 100vh;
  background-color: #021227;
  overflow: hidden;
  .scale-box {
    width: 1920px;
    height: 1080px;
    position: absolute;
    left: 50%;
    top: 50%;

    transform-origin: 0 0;
  }
}
</style>