可视化大屏自适应

最新推荐文章于 2024-10-07 20:56:37 发布

Live&&learn

最新推荐文章于 2024-10-07 20:56:37 发布

阅读量191

点赞数 1

文章标签：前端

本文链接：https://blog.csdn.net/weixin_55800388/article/details/142525261

版权

开发可视化大屏自适应插件

1.分析：

01.主要根据屏幕宽高比，自适应调整元素宽高比。

02.一般需求是主流宽高比，如果需求是必须撑满各种比例的屏幕，会出现元素缩放占比不平衡的问题，为保证效果，建议以多数比例为主进行开发。

2.基本样式

容器元素撑满宽高，内部子容器元素进行缩放

.container {
    width: 100vw;
	height: 100vh;
    .inner {
      overflow: hidden;
      transform-origin: left top;
      z-index: 999;
      position: fixed;
      transition: all 0.3s;
     }
}

3.动态样式通过scale解决

等比缩放（能保证不变形，但是可能显示不全），如果宽高都适配，可能出现比例失调问题。

监听窗口大小变化

//根据常用宽高进行设置 
const autoResizeScreen = () => {
    // const { width, height } = window.screen
    const { clientWidth, clientHeight } = document.body
    let width = 1920,height = 1080
    let left
    let top
    let scale
    //根据可视化区域的宽高比与 屏幕的宽高比  来进行对应屏幕的缩放，保证高度适应，宽度居中
    if (clientWidth / clientHeight > width / height) {
      scale = clientHeight / height
      top = 0
      left = (clientWidth - width * scale) / 2
    } else {
      scale = clientWidth / width
      left = 0
      top = (clientHeight - height * scale) / 2
    }
    // 挂载后再执行
    if (mounted.value) {
      // 通过复制，将对象属性合并。
      Object.assign(domRef.value.style, {
        transform: `scale(${scale})`,
        left: `${left}px`,
        top: `${top}px`,
      })
    }
  }
// 当网页中的元素或浏览器的窗口大小发生变化时，执行函数（前提是dom元素已加载）
window.addEventListener('resize', autoResizeScreen)