🧑💻 寫在開頭
點贊 + 收藏 === 學會🤣🤣🤣
1. 視口單位佈局 (Viewport Units)
使用 vw 和 vh 單位來實現響應式佈局：
.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 中配置，非常重要，它實現了 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 輸出，只包含變量、混合宏和函數 - 性能影響：雖然輕微，但每個樣式文件都會額外編譯註入的內容
- 命名衝突：全局注入可能導致命名衝突，需注意命名規範
函數工作原理
- 設計基準：以 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);
}
注意事項
- 極端比例屏幕（如超寬屏）可能需要額外媒體查詢調整
- 字體大小使用視口單位可能導致可讀性問題，需要謹慎使用
- 最小字體大小可能需要設置限制，防止在小屏幕上過小
這種方法是實現大屏自適應佈局的高效方式，特別適合數據可視化類的大屏項目。
2. Flex 彈性佈局
整體佈局使用 Flexbox 實現：
<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 圖表通過監聽窗口 resize 事件實現自適應：
window.addEventListener('resize', () => {
myChart.resize();
});
4. 全屏切換功能
使用 screenfull 庫實現全屏切換：
let fullScreen = () => {
if (screenfull.isEnabled) {
screenfull.toggle();
}
};
5. 縮放控制
通過監聽滾輪事件實現頁面縮放：
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. 柵格系統
使用 Element Plus 的柵格系統進行列布局：
<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>
7. 自定義 SCSS 函數vw() 和 vh() 函數
@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;
}
如果對您有所幫助，歡迎您點個關注，我會定時更新技術文檔，大家一起討論學習，一起進步。
