vue大屏展示适配 vue大屏展示适配的方法
weixin_43859882 人气:3想了解vue大屏展示适配的方法的相关内容吗,weixin_43859882在本文为您仔细讲解vue大屏展示适配的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点: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倍的效果
加载全部内容