vue大屏展示适配

最新推荐文章于 2024-08-01 16:35:03 发布

weixin_43859882

最新推荐文章于 2024-08-01 16:35:03 发布

阅读量1k

点赞数 1

分类专栏：大屏可视化

本文链接：https://blog.csdn.net/weixin_43859882/article/details/119744867

版权

本文介绍了在Vue项目中实现大屏展示的适配方案，通过创建utils文件夹内的cv文件并配置app.vue的结构样式，确保字体大小和盒子宽度以px固定，从而在不同缩放比例下保持页面效果稳定。即使将页面放大到500倍，基本页面布局仍能保持良好。

摘要由CSDN通过智能技术生成

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 <