这篇文章主要介绍“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结构样式
<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倍的效果
到此，关于“vue大屏展示适配的方法是什么”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
