前端大屏自適應(yīng)兩種實(shí)現(xiàn)方法總結(jié)

更新時(shí)間：2025年01月18日 09:56:40 作者：@玖伍貳柒

這篇文章主要介紹了前端大屏自適應(yīng)兩種實(shí)現(xiàn)方法,縮放方法會(huì)影響地圖等庫(kù)的交互效果,而vh、vw、百分比等方法只適用于高度變化,寬度變化時(shí)可能需要結(jié)合計(jì)算屬性來處理,但總體上適配效果較好,需要的朋友可以參考下

方法一：縮放（scale）

1.app.vue組件代碼（用于app組件縮放會(huì)作用于整項(xiàng)目，也可以單獨(dú)用于大屏頁面）

<template>
  <ElConfigProvider :locale="locale">
    <div class="inner"
         :style="{
           'width': `${styleTransform.width}px`,
           'height': `${styleTransform.height}px`,
           'transform': styleTransform.transform
         }">
      <router-view></router-view>
    </div>
  </ElConfigProvider>
</template>

<script setup>
import {reactive, onMounted, onBeforeUnmount} from 'vue';
import {ElConfigProvider} from 'element-plus';
import zhCn from 'element-plus/dist/locale/zh-cn.mjs';
import {useRouter} from 'vue-router';

// 定義 Element Plus 的語言環(huán)境
const locale = zhCn;
const router = useRouter();

// 使用 reactive 創(chuàng)建響應(yīng)式對(duì)象，保存視口的寬度、高度和變換樣式
const styleTransform = reactive({
  width: 1920, // 視口的初始寬度
  height: 953, // 視口的初始高度
  transform: 'scaleY(1) scaleX(1) translate(-50%, -50%)', // 初始變換樣式
});

// 生命周期鉤子，在組件掛載時(shí)設(shè)置初始縮放，并設(shè)置窗口調(diào)整大小時(shí)的處理函數(shù)
onMounted(() => {
  setScale(); // 組件掛載時(shí)設(shè)置縮放
  window.addEventListener('resize', setScale); // 監(jiān)聽窗口調(diào)整大小事件
});
// 在組件銷毀時(shí)移除窗口調(diào)整大小事件監(jiān)聽器
onBeforeUnmount(() => {
  window.removeEventListener('resize', setScale); // 移除窗口調(diào)整大小事件監(jiān)聽器
});

// 根據(jù)窗口大小計(jì)算縮放比例
const getScale = () => {
  const w = window.innerWidth / styleTransform.width; // 計(jì)算寬度縮放比例
  const h = window.innerHeight / styleTransform.height; // 計(jì)算高度縮放比例
  return {x: w, y: h};
};

// 根據(jù)計(jì)算的縮放比例更新變換樣式
const setScale = () => {
  const scale = getScale(); // 獲取當(dāng)前縮放比例
  styleTransform.transform = `scaleY(${scale.y}) scaleX(${scale.x}) translate(-50%, -50%)`;
};
</script>

<style scoped>
.inner {
  transform-origin: 0 0; /* 設(shè)置縮放的原點(diǎn)為元素的左上角 */
  position: fixed; /* 固定定位，使元素相對(duì)于視口的位置不變 */
  left: 50%; /* 將元素水平居中 */
  top: 50%; /* 將元素垂直居中 */
  transition: 0.3s; /* 為縮放樣式的變化添加平滑過渡效果 */
}
</style>

2.缺點(diǎn)：使用此方法后頁面不能有地圖（cesium）等js庫(kù)，形狀會(huì)受縮放影響，從而影響地圖的交互效果

方法二：vh，vw，百分比%，利用高度或者寬度比例算出px值

1.思路：在頁面中盡量使用vh，vw，%，等單位去設(shè)置容器寬高大小，遇到需要用px值去設(shè)置大小的就需要用（100vh/開發(fā)設(shè)備顯示屏的高度）或者（100vw/開發(fā)設(shè)備顯示屏的寬度）算出一個(gè)比例再用calc計(jì)算屬性去算出一個(gè)動(dòng)態(tài)的px值

2.具體實(shí)現(xiàn)（當(dāng)前例子用高度比例來算）

1）算出比例值（scss的話把@符號(hào)改成$符號(hào)）

2.在需要用到px值的時(shí)候用計(jì)算出來的動(dòng)態(tài)px值

3.缺點(diǎn)：此方法只用高度來計(jì)算比例，當(dāng)瀏覽器的窗口只變化寬度時(shí)，就會(huì)出自適應(yīng)無效或者不充分的現(xiàn)象（只用寬度來計(jì)算時(shí)也有這樣的問題，但實(shí)際場(chǎng)景中一般不會(huì)出現(xiàn)只變化高度或者寬度，所以影響較小）