关于vue自适应布局(各种浏览器,分辨率)的示例代码

更新时间：2022年09月06日 09:47:33 作者：KinHKin

这篇文章主要介绍了vue自适应布局（各种浏览器，分辨率）,主要使用了flex布局的flex:1属性和自适应的css+vh+百分比这种方式，开局设置overflow:hidden，主体main部分要设置：overflow:auto，需要的朋友可以参考下

1.前言

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

整体布局，上左右风格，或者上下风格符合或者复杂的上菜单，左菜单，右内容风格，符合spa的菜单操作方式菜单nav部分固定宽度，配合收起，展开效果；头部固定高度，内容区域flex:1；版本部分固定高度，固定位置内容区域需要适应不同的分辨率，做浏览器的适配需要适配浏览器的百分比缩放的问题

预览图片如下：

现在布局实现的是头，左侧菜单，尾部固定，内容区域自适应布局的方案，最重要的是需要解决的是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下面创建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文件代码，就是路由放置区域：

<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布局

3.测试效果

谷歌浏览器，大小缩放等：

屏幕放大效果：

4.总结

主要使用了flex布局的flex:1属性和自适应的css+vh+百分比这种方式，开局设置overflow:hidden，主体main部分要设置：overflow:auto，这种方式可以自动使得菜单的滚动条和内容的滚动条在一个区域内滚动.

到此这篇关于vue自适应布局(各种浏览器,分辨率)的文章就介绍到这了,更多相关vue自适应布局内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue下的elementui轮播图自适应高度问题
这篇文章主要介绍了vue下的elementui轮播图自适应高度问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
Vue项目优化的一些实战策略
代码优化不仅仅局限在业务逻辑这块，像是代码复用、效率等等都是我们可以加以改进的地方，这篇文章主要给大家介绍了关于Vue项目优化的一些实战策略，需要的朋友们下面随着小编来一起学习学习吧
2021-05-05
vue组件开发之用户无限添加自定义填写表单的方法
今天小编就为大家分享一篇vue组件开发之用户无限添加自定义填写表单的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08
Vant如何自定义组件适配iphone底部安全区
这篇文章主要介绍了Vant如何自定义组件适配iphone底部安全区问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
在Vue使用$attrs实现构建高级组件
本文我们主要来看下Vue3中的$attrs属性。首先，我们会介绍它的用途以及它的实现与Vue2有哪些不两同点，并通过事例来加深对它的理解
2022-09-09
vue3.0语法糖内的defineProps及defineEmits解析
这篇文章主要介绍了vue3.0语法糖内的defineProps及defineEmits解析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
Vue.js 十五分钟入门图文教程
不过 Vue 本身含有非常丰富的功能，要用 Vue 搭建完整的应用，仍然需要了解大量 Vue 设计概念和操作技巧。这篇文章主要介绍了Vue.js 十五分钟入门图文教程,需要的朋友可以参考下
2018-09-09
mpvue 如何使用腾讯视频插件的方法
这篇文章主要介绍了mpvue 如何使用腾讯视频插件的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-07-07
详解使用vue-router进行页面切换时滚动条位置与滚动监听事件
本篇文章主要介绍了详解使用vue-router进行页面切换时滚动条位置与滚动监听事件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
2017-03-03
Vue组合式API如何正确解构props不会丢失响应性
响应式 API 赋予了组合式 API 一大坨可能性的同时,代码精简,虽然但是,我们应该意识到响应性的某些陷阱,比如丢失响应性,在本文中,我们将学习如何正确解构 Vue 组件的 props,使得 props 不会丢失响应性
2024-01-01