第關于vue自適應布局(各種瀏覽器,分辨率)的示例代碼目錄1.前言2.vue的布局風格2.1vue3需要配合elementplus進行布局2.2src下面創建layout文件夾3.測試效果4.總結

1.前言

spa頁面的layout布局對于前端項目的影響至關重要，在我們進行web端開發的時候，前端的各種大小屏幕，各種內核的瀏覽器不同，會導致我們的頁面呈現出不一樣的效果，如何進行更好的取舍，怎么能夠達到產品對于系統展示效果的滿意度，其實我們要前端有一套布局理念，這種理念指導我們如何進行優雅布局，怎么才能不被不合理的需求左右。理念分為以下幾點：

整體布局，上左右風格，或者上下風格符合或者復雜的上菜單，左菜單，右內容風格，符合spa的菜單操作方式菜單nav部分固定寬度，配合收起，展開效果；頭部固定高度，內容區域flex:1；版本部分固定高度，固定位置內容區域需要適應不同的分辨率，做瀏覽器的適配需要適配瀏覽器的百分比縮放的問題

預覽圖片如下：

現在布局實現的是頭，左側菜單，尾部固定，內容區域自適應布局的方案，最重要的是需要解決的是main里面的適應分辨率，瀏覽器內核的問題，往下看??

2.vue的布局風格

2.1vue3需要配合elementplus進行布局

安裝$npminstallelement-plus--save

引入main.ts

import{createApp}fromvue

import{createPinia}frompinia

importAppfrom./App.vue

importrouterfrom./router

importElementPlusfromelement-plus

importelement-plus/dist/index.css

import./assets/main.css

constapp=createApp(App);

app.use(ElementPlus);

app.use(createPinia());

app.use(router);

app.mount(#app

2.2src下面創建layout文件夾

入口文件layoutIndex.vue，三個子組件

layoutIndex入口文件較為重要：

scriptsetuplang="ts"

importlayoutHeaderfrom"./layoutHeader.vue";

importlayoutMainfrom"./layoutMain.vue";

importlayoutFooterfrom"./layoutFooter.vue";

importmenufrom"./menu";

import{RouterLink}from"vue-router";

/script

template

div

el-container

el-headerlayout-header/layout-header/el-header

el-container

el-asidewidth="200px"

nav

RouterLink

v-for="(item,index)inmenu"

:key="'menu'+index"

:to="item.url"

{{item.title}}{{index+1}}/RouterLink

/nav

/el-aside

el-container

el-mainlayout-main/layout-main/el-main

el-footerlayout-footer/layout-footer/el-footer

/el-container

/el-container

/el-container

/div

/template

style

margin:0;

padding:0;

.common-layout{

height:100vh;

.el-container{

overflow:hidden;

.el-container.is-vertical{

height:100%;

.nav-class{

display:flex;

flex-direction:column;

height:100%;

align-items:center;

.nav-classa{

min-height:35px;

line-height:35px;

color:#fff;

.nav-classa:hover{

color:rgb(151,219,50);

.nav-classa:focus{

color:rgb(151,219,50);

.el-aside{

background-color:lightslategrey;

/style

頭部文件layoutHeader

template

divheader/div

/template

style

.el-header{

margin:0;

padding:0;

height:68px;

background-color:aliceblue;

text-align:center;

line-height:68px;

/style

layoutFooter文件代碼

template

divfooter/div

/template

style

.el-footer{

margin:0;

padding:0;

height:68px;

background-color:azure;

text-align:center;

line-height:68px;

/style

main文件代碼，就是路由放置區域：

scriptsetuplang="ts"

import{RouterView}from"vue-router";

/script

template

divRouterView//div

/template

style

.el-main{

overflow:auto;

height:100%;

/style

滾動效果：頭部尾部不動，css控制，flex布局，沒有position布局

3.測試效果

谷歌瀏覽器，