關(guān)于vue自適應(yīng)布局(各種瀏覽器,分辨率)的示例代碼

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

1.前言

spa頁面的layout布局對(duì)于前端項(xiàng)目的影響至關(guān)重要，在我們進(jìn)行web端開發(fā)的時(shí)候，前端的各種大小屏幕，各種內(nèi)核的瀏覽器不同，會(huì)導(dǎo)致我們的頁面呈現(xiàn)出不一樣的效果，如何進(jìn)行更好的取舍，怎么能夠達(dá)到產(chǎn)品對(duì)于系統(tǒng)展示效果的滿意度，其實(shí)我們要前端有一套布局理念，這種理念指導(dǎo)我們?nèi)绾芜M(jìn)行優(yōu)雅布局，怎么才能不被不合理的需求左右。理念分為以下幾點(diǎn)：

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

預(yù)覽圖片如下：

現(xiàn)在布局實(shí)現(xiàn)的是頭，左側(cè)菜單，尾部固定，內(nèi)容區(qū)域自適應(yīng)布局的方案，最重要的是需要解決的是main里面的適應(yīng)分辨率，瀏覽器內(nèi)核的問題，往下看??

2.vue的布局風(fēng)格

2.1vue3需要配合elementplus進(jìn)行布局

安裝$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下面創(chuàng)建layout文件夾

入口文件layoutIndex.vue，三個(gè)子組件

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文件代碼，就是路由放置區(qū)域：

scriptsetuplang="ts"

import{RouterView}from"vue-router";

/script

template

divRouterView//div

/template

style

.el-main{

overflow:auto;

height:100%;

/style

滾動(dòng)效果：頭部尾部不動(dòng)，css控制，flex布局，沒有position布局

3.測試效果

谷歌瀏覽器，