驾驶舱大屏适配方案

1、scale 搭配 vw、vh 使用

<template>
  <div class="container">
    <div class="screen" ref="container">
      
    div>
  div>
template>

使用步骤：

• 最外层父元素 container 使用 vw 和 vh 根据浏览器窗口设置宽高
• screen 元素根据设计图设置具体的宽高
• 根据实际的窗口大小对 screen 元素进行缩放，具体代码如下：

<template>
  <div class="container">
    <div class="screen" ref="container">
      
    div>
  div>
template>

<script setup lang='ts'>
  import { ref, onMounted } from 'vue'
  let container = ref();


  onMounted(() => {
    container.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`
  })

  window.onresize = () => {
    container.value.style.transform = `scale(${getScale()})`
  }

  const getScale = (w = 1920, h = 1080) => {
    let ww = window.innerWidth / w;
    let wh = window.innerHeight / h;
    return ww < wh ? ww:wh;
  }
script>

<style lang='scss' scoped>
  .container {
    width: 100vw;
    height: 100vh;
    background: url("../../assets/images/screen/bg.png") no-repeat;
    background-size: cover;
    .screen {
      width: 1920px;
      height: 1080px;
      position: fixed;
      // transform: translate(-50%, -50%);
      left: 50%;
      top: 50%;
      transform-origin: left top;
      background: skyblue;
    }
  }
style>