| 本文实例为大家分享了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倍的效果 
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持51zixue.net。
下载地址:
JavaScript数组去重的几种方法详谈
js数组forEach实例用法详解 |
