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

更新時間：2022年09月06日 09:47:33 作者：KinHKin

這篇文章主要介紹了vue自適應布局（各種瀏覽器，分辨率）,主要使用了flex布局的flex:1屬性和自適應的css+vh+百分比這種方式，開局設置overflow:hidden，主體main部分要設置：overflow:auto，需要的朋友可以參考下

1.前言

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

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

預覽圖片如下：

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

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下面創(chuàng)建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 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>

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