VUE3大屏自適應布局的幾種實現(xiàn)方式

更新時間：2025年10月20日 10:49:48 作者：FAIRY_STARS

本文主要介紹了基于SCSS自定義vw和vh函數實現(xiàn)響應式布局的方法,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

1. 視口單位布局 (Viewport Units)

使用 vw 和 vh 單位來實現(xiàn)響應式布局：

.full-screen {
  width: vw(1920);
  height: vh(1080);
  padding: vh(5) vw(5) vh(5) vw(5);
}

.header-title {
  font-size: vw(40);
  line-height: vh(80);
}

這里的 vw() 和 vh() 函數是自定義的 SCSS 函數，用于將設計稿尺寸(1920×1080)轉換為視口單位。

SCSS函數：

@use "sass:math";

$designWidth: 1920;
$designHeight: 1080;

@function vw($px){
    @return math.div($px, $designWidth) * 100vw;
}

@function vh($px){
    @return math.div($px, $designHeight) * 100vh;
}

需要在 vite.config.js 中配置，非常重要，它實現(xiàn)了 SCSS 預處理器的全局變量和函數注入功能：

css: {
  preprocessorOptions: {
    scss: {
      additionalData: '@import "@/styles/utils.scss";'
    },
  },
}

作用解釋

1. 全局 SCSS 變量和函數注入

這段配置會在編譯每個 SCSS 文件時，自動在文件開頭插入 @import "@/styles/utils.scss";。這意味著：

無需在每個 Vue 組件的 <style> 標簽中手動導入 utils.scss
所有 SCSS 變量、混合宏(mixin)和函數都可以在所有組件中直接使用

2. 實際效果

由于這個配置，可以在任何組件的樣式中直接使用 vw() 和 vh() 函數：

<template>
  <div class="container">...</div>
</template>

<style scoped lang="scss">
.container {
  width: vw(300); // 直接使用，無需導入
  height: vh(200); // 直接使用，無需導入
  padding: vh(10) vw(20);
}
</style>

注意事項

避免副作用：確保 utils.scss 中不包含實際 CSS 輸出，只包含變量、混合宏和函數
性能影響：雖然輕微，但每個樣式文件都會額外編譯注入的內容
命名沖突：全局注入可能導致命名沖突，需注意命名規(guī)范

函數工作原理

設計基準：以 1920×1080 分辨率作為設計基準
單位轉換：
- vw($px)：將像素值轉換為相對于視口寬度的百分比
- vh($px)：將像素值轉換為相對于視口高度的百分比
計算方式：
- math.div($px, $designWidth) * 100vw：計算元素寬度占設計稿寬度的比例，然后轉換為視口寬度單位
- math.div($px, $designHeight) * 100vh：計算元素高度占設計稿高度的比例，然后轉換為視口高度單位

使用示例

.header {
  width: vw(1900); // 轉換為約 98.96vw (1900/1920*100)
  height: vh(100); // 轉換為約 9.26vh (100/1080*100)
  font-size: vh(40); // 轉換為約 3.7vh
}

.content-box {
  margin: vh(5) 0;
  padding: vh(5) vw(5) vh(10) vw(5);
}

注意事項

極端比例屏幕（如超寬屏）可能需要額外媒體查詢調整
字體大小使用視口單位可能導致可讀性問題，需要謹慎使用
最小字體大小可能需要設置限制，防止在小屏幕上過小

這種方法是實現(xiàn)大屏自適應布局的高效方式，特別適合數據可視化類的大屏項目。

2. Flex 彈性布局

整體布局使用 Flexbox 實現(xiàn)：

<div class="full-screen">
  <div class="header">...</div>
  <div class="center">...</div>
  <div class="footer">...</div>
</div>

.full-screen {
  display: flex;
  flex-direction: column;
}

.center {
  display: flex;
  // flex-direction: column;
}

3. 圖表自適應

ECharts 圖表通過監(jiān)聽窗口 resize 事件實現(xiàn)自適應：

window.addEventListener('resize', () => {
  myChart.resize();
});

4. 全屏切換功能

使用 screenfull 庫實現(xiàn)全屏切換：

let fullScreen = () => {
  if (screenfull.isEnabled) {
    screenfull.toggle();
  }
};

5. 縮放控制

通過監(jiān)聽滾輪事件實現(xiàn)頁面縮放：

window.addEventListener('wheel', function(event) {
  if (event.ctrlKey || event.metaKey) {
    if (event.deltaY > 0) {
      document.body.style.zoom = (parseFloat(getComputedStyle(document.body).zoom) || 1) * 1.1;
    }
    if (event.deltaY < 0) {
      document.body.style.zoom = (parseFloat(getComputedStyle(document.body).zoom) || 1) / 1.1;
    }
  }
});

6. 柵格系統(tǒng)

使用 Element Plus 的柵格系統(tǒng)進行列布局：

<el-row class="header" :gutter="20">
  <el-col :span="7" class="header-time">...</el-col>
  <el-col :span="10" class="header-title">...</el-col>
  <el-col :span="6">...</el-col>
</el-row>

到此這篇關于VUE3大屏自適應布局的幾種實現(xiàn)方式的文章就介紹到這了,更多相關VUE3大屏自適應布局內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: