大屏适配方案

方案一:rem + font-size

设计稿的宽1920平均分为24等份,每一份80px
PC端平均分为24份,移动端分为10等份
HTML字体大小设置为80px,即1rem=80px,24rem=1920px
安装cssrem插件
设置:勾选rem hover ,将root font size修改为80

function setRemUnit(){
var rem=docEl.clientWidth/24
docEl.style.fontSize=rem ="px"
}
body{
width:24rem
}

方案二:vw

屏幕的宽默认为100vw=1920 1vw=19.2px
安装cssrem插件
设置:勾选vw ,将vw design修改为1920

body{
width:100vw
}

方案三:scale

动态计算网页宽高比

//1.设计稿的尺寸
let targetX=1920
let targetY=1080
let targetRatio=16/9
//2.拿到当前设备的宽度
let currentX=document.documentElement.clientWidth||document.body.clientWidth
let currentY=document.documentElement.clientHeight||document.body.clientHeight
//3.计算缩放比例
let scaleRatio =currentX/targetX//参照宽度缩放(默认)
let currentRatio=currentX/currentY
//超宽屏
let (currentRatio>targetRatio){
scaleRatio=currentY/targetY//根据高度缩放
document.body.style=`width:${targetX}px;height:${targetY}px;transform:scale(${scaleRatio}) translateX(-50%); left:50%`
}else{
document.body.style=`width:${targetX}px;height:${targetY}px;transform:scale(${scaleRatio})`
}

应用

//hooks/useScalePage.js

import { onMounted, onUnmounted } from 'vue';
import _ from 'lodash' 

/**
  大屏适配的 hooks
 */
export default function useScalePage(option) {

  const resizeFunc = _.throttle(function() {//节流
    triggerScale() // 动态缩放网页
  }, 100)

  onMounted(()=>{
    triggerScale()  // 动态缩放网页
    window.addEventListener('resize', resizeFunc)
  })

  onUnmounted(()=>{
    window.removeEventListener('resize', resizeFunc) // 释放
  })

  // 大屏的适配
  function triggerScale() {
    // 1.设计稿的尺寸
    let targetX = option.targetX ||  1920
    let targetY = option.targetY || 1080
    let targetRatio = option.targetRatio ||  16 / 9 // 宽高比率

    // 2.拿到当前设备(浏览器)的宽度
    let currentX = document.documentElement.clientWidth || document.body.clientWidth
    let currentY = document.documentElement.clientHeight || document.body.clientHeight

    // 3.计算缩放比例
    let scaleRatio = currentX / targetX; // 参照宽度进行缩放 ( 默认情况 )
    let currentRatio = currentX / currentY // 宽高比率

    // 超宽屏
    if(currentRatio > targetRatio) {
      // 4.开始缩放网页
      scaleRatio = currentY / targetY // 参照高度进行缩放
      document.body.style = `width:${targetX}px; height:${targetY}px;transform: scale(${scaleRatio}) translateX(-50%); left: 50%`
    } else {
      // 4.开始缩放网页
      document.body.style = `width:${targetX}px; height:${targetY}px; transform: scale(${scaleRatio})`
    }
  }
}

//AApp.vue
<template>
<RouterView/>'
</template>
<script setup>
import {RouterView} from 'vue-router'
import useScalePage from '@/hooks/useScalePage'
let option={
targetX:1920,
targetY:1080,
targetRatio:16/9
}
useScalePage(option)
</script>