1.前言

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

整体布局，上左右风格，或者上下风格符合或者复杂的上菜单，左菜单，右内容风格，符合spa的菜单操作方式

菜单nav部分固定宽度，配合收起，展开效果；头部固定高度，内容区域flex:1；版本部分固定高度，固定位置

内容区域需要适应不同的分辨率，做浏览器的适配

需要适配浏览器的百分比缩放的问题

预览图片如下：

现在布局实现的是头，左侧菜单，尾部固定，内容区域自适应布局的方案，最重要的是需要解决的是main里面的适应分辨率，浏览器内核的问题，往下看⬇️

1.前言

2.vue的布局风格

2.1vue3需要配合element plus进行布局

2.2src下面创建layout文件夹

3.测试效果

4.总结

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"><RouterLinkv-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，这种方式可以自动使得菜单的滚动条和内容的滚动条在一个区域内滚动，后续我会把完整代码放在个人主页KinHKin的博客_CSDN博客-vue,中秋活动,性能优化领域博主

的资源里面，供大家免费下载，希望大家能够喜欢

vue自适应布局（各种浏览器，分辨率）相关推荐

css3 calc()自适应布局属性 ---浏览器版本兼容性的问题
"无意中发现了一个巨牛的人工智能教程,忍不住分享一下给大家.教程不仅是零基础,通俗易懂,而且非常风趣幽默,像看小说一样!觉得太牛了,所以分享给大家.点这里可以跳转到教程." 我们想 ...
ASP.NET MVC 4中如何为不同的浏览器自适应布局和视图
在ASP.NET MVC 4中,可以很简单地实现针对不同的浏览器自适应布局和视图.这个得归功于MVC中的"约定甚于配置"的设计理念. 默认的自适应 MVC 4自动地为移动设备浏览器 ...
vue移动端自适应布局
vue移动端自适应布局根据postcss-pxtorem来实现自动渲染px至rem,不用再进行手动计算一.实现方式 postcss-pxtorem:将px转换为rem: amfe-flexible ...
Vue前端项目自适应布局
Vue前端项目自适应布局一.单位尺寸二.基于rem实现自适应布局一.单位尺寸 px % vw.vh: 窗口 em: 针对父元素的font-size rem:"root em" ...
静态布局、自适应布局、流式布局、响应式布局、弹性布局简析、BFC
静态布局:给页面元素设置固定的宽度和高度,单位用px,当窗口缩小,会出现滚动条,拉动滚动条显示被遮挡内容.针对不同分辨率的手机端,分别写不同的样式文件.例如:浏览器窗口是1000px,那么最小的宽度是 ...
css经典布局——头尾固定高度中间高度自适应布局
今天说说一个经典布局:头尾固定高度中间高度自适应布局! 转文请标明 --- 出处:穆乙 http://www.cnblogs.com/pigtail/ 相信做过后台管理界面的同学,都非常清楚这个布局. ...
Web自适应布局你需要知道的所有事儿
有这样一个问题. 请说说你知道的所有web布局方式? 一般来说,有以下这些布局方法: 浮动 float:left|right inline-block display:inline-block fle ...
谈谈利用JavaScript结合相对单位rem实现自适应布局的简单而实用的方法
谈谈利用JavaScript结合相对单位rem实现自适应布局的简单而实用的方法 rem是css3新增的一个相对单位,相对的只是HTML根元素,可以只修改根元素字体大小就可以成比例地调整所有字体大小.我 ...
多种方法实现自适应布局
最近切了几个手机端的网页,第一次切的是美团的首页,为了自适应不同的手机分辨率,需要用到自适应布局,切图的时候是用的第一中方法,用到了定位,后来查找了一些其他方法,现在就介绍几种自适应布局的实现方法: ...

vue自适应布局（各种浏览器，分辨率）

1.前言

2.vue的布局风格

2.1vue3需要配合element plus进行布局

2.2src下面创建layout文件夹

3.测试效果

4.总结

vue自适应布局（各种浏览器，分辨率）相关推荐

最新文章

热门文章