vue自适应布局（各种浏览器，分辨率）

最新推荐文章于 2026-06-12 19:39:29 发布

原创

最新推荐文章于 2026-06-12 19:39:29 发布 · 3w 阅读

122

272

标签

#vue.js #前端 #javascript

本文介绍了如何在Vue3项目中利用ElementPlus库构建响应式的SPA布局。主要内容包括固定头部、侧边菜单和底部的布局实现，以及内容区域的自适应调整，确保在不同分辨率和浏览器缩放下保持良好显示效果。通过创建layout文件夹和多个子组件，实现了布局的模块化。测试结果显示布局在谷歌浏览器中具有良好的适应性和可缩放性。

1.前言

spa页面的layout布局对于前端项目的影响至关重要，在我们进行web端开发的时候，前端的各种大小屏幕，各种内核的浏览器不同，会导致我们的页面呈现出不一样的效果，如何进行更好的取舍，怎么能够达到产品对于系统展示效果的满意度，其实我们要前端有一套布局理念，这种理念指导我们如何进行优雅布局，怎么才能不被不合理的需求左右。理念分为以下几点：

整体布局，上左右风格，或者上下风格符合或者复杂的上菜单，左菜单，右内容风格，符合spa的菜单操作方式

菜单nav部分固定宽度，配合收起，展开效果；头部固定高度，内容区域flex:1；版本部分固定高度，固定位置

内容区域需要适应不同的分辨率，做浏览器的适配

需要适配浏览器的百分比缩放的问题

预览图片如下：

现在布局实现的是头，左侧菜单，尾部固定，内容区域自适应布局的方案，最重要的是需要解决的是main里面的适应分辨率，浏览器内核的问题，往下看⬇️

1.前言

2.vue的布局风格

2.1vue3需要配合element plus进行布局

2.2src下面创建layout文件夹

3.测试效果

4.总结

2.vue的布局风格

2.1vue3需要配合element plus进行布局

安装 $ npm install element-plus --save

引入 main.ts

import { createApp } from "vue";

import { createPinia } from "pinia";

import App from "./App.vue";

import router from "./router";

import ElementPlus from "element-plus";

import "element-plus/dist/index.css";

import "./assets/main.css";

const app = createApp(App);

app.use(ElementPlus);

app.use(createPinia());

app.use(router);

app.mount("#app");

2.2src下面创建layout文件夹

入口文件layoutIndex.vue，三个子组件

layoutIndex入口文件较为重要：

<script setup lang="ts">
import layoutHeader from "./layoutHeader.vue";
import layoutMain from "./layoutMain.vue";
import layoutFooter from "./layoutFooter.vue";
import menu f