VUE3大屏自适应布局
<h1 data-id="heading-0">🧑💻 写在开头</h1><p>点赞 + 收藏 === 学会🤣🤣🤣</p>
<h2 data-id="heading-0">1. 视口单位布局 (Viewport Units)</h2>
<p>使用 <code>vw</code> 和 <code>vh</code> 单位来实现响应式布局：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">.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);
}</pre>
</div>
<p>这里的 <code>vw()</code> 和 <code>vh()</code> 函数是自定义的 SCSS 函数，用于将设计稿尺寸(1920×1080)转换为视口单位。</p>
<h3>SCSS函数：</h3>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">@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;
}</pre>
</div>
<p>需要在 <code>vite.config.js</code> 中配置，非常重要，它实现了 SCSS 预处理器的全局变量和函数注入功能：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">css: {
preprocessorOptions: {
scss: {
additionalData: '@import "@/styles/utils.scss";'
},
},
}</pre>
</div>
<div>
<div>
<h2 data-id="heading-1">作用解释</h2>
<h3 data-id="heading-2">1. 全局 SCSS 变量和函数注入</h3>
<p>这段配置会在编译每个 SCSS 文件时，自动在文件开头插入 <code>@import "@/styles/utils.scss";</code>。这意味着：</p>
<ul>
<li>无需在每个 Vue 组件的 <code><style></code> 标签中手动导入 <code>utils.scss</code></li>
<li>所有 SCSS 变量、混合宏(mixin)和函数都可以在所有组件中直接使用</li>
</ul>
<h3 data-id="heading-3">2. 实际效果</h3>
<p>由于这个配置，可以在任何组件的样式中直接使用 <code>vw()</code> 和 <code>vh()</code> 函数：</p>
</div>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;"><template>
<div class="container">...</div>
</template>
<style scoped lang="scss">
.container {
width: vw(300); // 直接使用，无需导入
height: vh(200); // 直接使用，无需导入
padding: vh(10) vw(20);
}
</style></pre>
</div>
<div>
<div>
<h2 data-id="heading-4">注意事项</h2>
<ol>
<li><strong>避免副作用</strong>：确保 <code>utils.scss</code> 中不包含实际 CSS 输出，只包含变量、混合宏和函数</li>
<li><strong>性能影响</strong>：虽然轻微，但每个样式文件都会额外编译注入的内容</li>
<li><strong>命名冲突</strong>：全局注入可能导致命名冲突，需注意命名规范</li>
</ol>
<h2 data-id="heading-5">函数工作原理</h2>
<ol>
<li><strong>设计基准</strong>：以 1920×1080 分辨率作为设计基准</li>
<li><strong>单位转换</strong>：
<ul>
<li><code>vw($px)</code>：将像素值转换为相对于视口宽度的百分比</li>
<li><code>vh($px)</code>：将像素值转换为相对于视口高度的百分比</li>
</ul>
</li>
<li><strong>计算方式</strong>：
<ul>
<li><code>math.div($px, $designWidth) * 100vw</code>：计算元素宽度占设计稿宽度的比例，然后转换为视口宽度单位</li>
<li><code>math.div($px, $designHeight) * 100vh</code>：计算元素高度占设计稿高度的比例，然后转换为视口高度单位</li>
</ul>
</li>
</ol>
<h2 data-id="heading-6">使用示例</h2>
</div>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">.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);
}</pre>
</div>
<div>
<div>
<h2 data-id="heading-7">注意事项</h2>
<ol>
<li>极端比例屏幕（如超宽屏）可能需要额外媒体查询调整</li>
<li>字体大小使用视口单位可能导致可读性问题，需要谨慎使用</li>
<li>最小字体大小可能需要设置限制，防止在小屏幕上过小</li>
</ol>
<p>这种方法是实现大屏自适应布局的高效方式，特别适合数据可视化类的大屏项目。</p>
<h2 data-id="heading-8">2. Flex 弹性布局</h2>
<p>整体布局使用 Flexbox 实现：</p>
</div>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;"><div class="full-screen">
<div class="header">...</div>
<div class="center">...</div>
<div class="footer">...</div>
</div></pre>
</div>
<p> </p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">.full-screen {
display: flex;
flex-direction: column;
}
.center {
display: flex;
// flex-direction: column;
}</pre>
</div>
<h2 data-id="heading-9">3. 图表自适应</h2>
<p>ECharts 图表通过监听窗口 resize 事件实现自适应：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">window.addEventListener('resize', () => {
myChart.resize();
});</pre>
</div>
<h2 data-id="heading-10">4. 全屏切换功能</h2>
<p>使用 screenfull 库实现全屏切换：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">let fullScreen = () => {
if (screenfull.isEnabled) {
screenfull.toggle();
}
};</pre>
</div>
<h2 data-id="heading-11">5. 缩放控制</h2>
<p>通过监听滚轮事件实现页面缩放：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">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;
}
}
});</pre>
</div>
<h2 data-id="heading-12">6. 栅格系统</h2>
<p>使用 Element Plus 的栅格系统进行列布局：</p>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;"><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></pre>
</div>
<h2 data-id="heading-12">7. 自定义 SCSS 函数vw() 和 vh() 函数</h2>
<div class="cnblogs_Highlighter">
<pre class="brush:csharp;gutter:true;">@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;
}</pre>
</div>
</div>
<h3 id="tid-D8HBxE">如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。</h3>
</div>
<em><img src="https://img2024.cnblogs.com/blog/2149129/202501/2149129-20250122165814748-630765389.png" alt="" loading="lazy"></em></div><br><br>
来源：https://www.cnblogs.com/smileZAZ/p/19401016
頁:
[1]