千家信息网

vue大屏展示适配的方法是什么

发表于:2025-11-08 作者:千家信息网编辑
千家信息网最后更新 2025年11月08日,这篇文章主要介绍"vue大屏展示适配的方法是什么",在日常操作中,相信很多人在vue大屏展示适配的方法是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答"vue大屏展示
千家信息网最后更新 2025年11月08日vue大屏展示适配的方法是什么

这篇文章主要介绍"vue大屏展示适配的方法是什么",在日常操作中,相信很多人在vue大屏展示适配的方法是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答"vue大屏展示适配的方法是什么"的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

具体内容如下

1.utils文件夹建一个文件cv以下代码

export function useIndex (appRef) {  // * appRef指向最外层容器  // * 定时函数  let timer = null  // * 默认缩放值  const scale = {    width: '1',    height: '1'  }  // * 设计稿尺寸(px)  const baseWidth = 1920  const baseHeight = 1080  // * 需保持的比例(默认2)  // const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))  const baseProportion = 2  const calcRate = () => {    // 当前宽高比    const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5))    if (appRef) {      if (currentRate > baseProportion) {        // 表示更宽        scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5)        scale.height = (window.innerHeight / baseHeight).toFixed(5)        appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`      } else {        // 表示更高        scale.height = ((window.innerWidth / baseProportion) / baseHeight).toFixed(5)        scale.width = (window.innerWidth / baseWidth).toFixed(5)        appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`      }    }  }  const resize = () => {    clearTimeout(timer)    timer = setTimeout(() => {      calcRate()    }, 200)  }  // 改变窗口大小重新绘制  const windowDraw = () => {    window.addEventListener('resize', resize)  }  return {    appRef,    calcRate,    windowDraw  }}

2.app.vue结构样式

3.字体大小盒子宽度直接设置px不管放大缩小都是最初的样子,基本页面大小不会相差太远,下图是页面放大500倍的效果

到此,关于"vue大屏展示适配的方法是什么"的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注网站,小编会继续努力为大家带来更多实用的文章!

0