本文实例为大家分享了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结构样式

<template>
  <div ref="appRef" class="main">
    <div class="layout-container">
    </div>
  </div>
</template>

<script>
import { useIndex } from '@/utils/utilsDram.js'
export default {
  mounted () {
    const { calcRate, windowDraw } =useIndex(this.$refs.appRef)
    calcRate()
    windowDraw()
  }
}
</script>
<style lang="scss" scoped>
.main {
  color: #d3d6dd;
  width: 1920px;
  height: 1080px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: left top;

  .layout-container {
    width: 100%;
    height: 100%;
    }
   }
</style>

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

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• JavaScript职责链模式怎样理解？一文带你看懂

  今天给大家分享的是关于JavaScript设计模式中的职责链模式，之前我们介绍了很多JavaScript设计模式，下文对职责链模式也有实例和详细的介绍，感兴趣的朋友就继续往下看吧。

• 在jQuery中怎样修改指定的行元素的值

  jquery修改某一行值的方法：1、利用eq()方法获取指定行元素对象，语法为“元素对象.eq(行元素的索引)”；2、利用html()方法来修改已获取到指定行元素对象的值，语法为“行元素对象.html(修改后的值)”。

• 用JS来制作一个随机点名器的方法及代码是什么

  这篇文章主要给大家介绍了关于如何使用原生Js实现随机点名的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

• 小程序自定义导航如何实现的，代码是什么

  微信小程序自定义导航的方法 本文实例为大家分享了微信小程序自定义导航的具体代码,供大家参考,具体内容如下 在app.js中获取状态栏信息和胶囊按钮信息 onLaunch() {     // 展示本地存储能力     const logs = wx.getStorageSync('logs') || []     logs.unshift(Date.now())     wx.setStorageSync('logs', logs)     // 获取系统信息     this.globalData.systemInfo

• JS数组的增减操作方法有哪些，有何区别

  本篇文章给大家带来了关于javascript的相关知识，其中主要介绍了关于JavaScript的push()、pop()、unshift()、shift() 方法的使用，下面一起来看一下，希望对大家有帮助。