1.前言

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

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

預(yù)覽圖片如下?：

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

目錄

1.前言

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

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

2.2src下面創(chuàng)建layout文件夾

?3.測(cè)試效果

?4.總結(jié)

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

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

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

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

layoutIndex入口文件較為重要：

<script setup lang="ts">
import layoutHeader from "./layoutHeader.vue";
import layoutMain from "./layoutMain.vue";
import layoutFooter from "./layoutFooter.vue";
import menu from "./menu";
import { RouterLink } from "vue-router";
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-header><layout-header></layout-header></el-header>
      <el-container>
        <el-aside width="200px">
          <nav class="nav-class">
            <RouterLink
              v-for="(item, index) in menu"
              :key="'menu' + index"
              :to="item.url"
              >{{ item.title }}{{ index + 1 }}</RouterLink
            >
          </nav>
        </el-aside>
        <el-container>
          <el-main><layout-main></layout-main></el-main>
          <el-footer><layout-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-class a {
  min-height: 35px;
  line-height: 35px;
  color: #fff;
}
.nav-class a:hover {
  color: rgb(151, 219, 50);
}
.nav-class a:focus {
  color: rgb(151, 219, 50);
}

.el-aside {
  background-color: lightslategrey;
}
</style>

?頭部文件layoutHeader

<template>
  <div class="common-layout-header">header</div>
</template>
<style>
.el-header {
  margin: 0;
  padding: 0;
  height: 68px;
  background-color: aliceblue;
  text-align: center;
  line-height: 68px;
}
</style>

layoutFooter文件代碼

<template>
  <div class="common-layout-footer">footer</div>
</template>
<style>
.el-footer {
  margin: 0;
  padding: 0;
  height: 68px;
  background-color: azure;
  text-align: center;
  line-height: 68px;
}
</style>

main文件代碼 ，就是路由放置區(qū)域：

<script setup lang="ts">
import { RouterView } from "vue-router";
</script>
<template>
  <div class="common-layout-main"><RouterView /></div>
</template>
<style>
.el-main {
  overflow: auto;
  height: 100%;
}
</style>

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

?3.測(cè)試效果

谷歌瀏覽器，大小縮放等：

?屏幕放大效果：

?4.總結(jié)

主要使用了flex布局的flex:1屬性和自適應(yīng)的css+vh+百分比這種方式，開(kāi)局設(shè)置overflow:hidden，主體main部分要設(shè)置：overflow:auto，這種方式可以自動(dòng)使得菜單的滾動(dòng)條和內(nèi)容的滾動(dòng)條在一個(gè)區(qū)域內(nèi)滾動(dòng)，后續(xù)我會(huì)把完整代碼放在個(gè)人主頁(yè)KinHKin的博客_CSDN博客-vue,中秋活動(dòng),性能優(yōu)化領(lǐng)域博主

的資源里面，供大家免費(fèi)下載，希望大家能夠喜歡???????文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-785580.html

到了這里，關(guān)于vue自適應(yīng)布局（各種瀏覽器，分辨率）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！