位置: IT常识 - 正文

vue自适应布局(各种浏览器,分辨率)(vue 响应式自适应布局)

编辑:rootadmin
vue自适应布局(各种浏览器,分辨率) 1.前言

推荐整理分享vue自适应布局(各种浏览器,分辨率)(vue 响应式自适应布局),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vuepc端自适应布局,vue自适应布局用什么ui,vue自适应布局怎么做,vue自适应布局怎么做,vuepc端自适应布局,vuepc端自适应布局,vue自适应布局怎么做,vue 自适应布局,内容如对您有帮助,希望把文章链接给更多的朋友!

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";

vue自适应布局(各种浏览器,分辨率)(vue 响应式自适应布局)

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

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

本文链接地址:https://www.jiuchutong.com/zhishi/298329.html 转载请保留说明!

上一篇:nvm安装步骤(nvme安装方法)

下一篇:前端与后端传递数据 — — JSON(前端传给后端)

  • 盈利能力的概念及内容
  • 小规模纳税人要做账吗
  • 没有发票的房租如何入账
  • 生鲜配送公司财务制度
  • 多缴纳个人所得税怎么办
  • 私立医院收到投诉信
  • 当月抵扣的发票可以下个月记账吗
  • 企业固定资产职称是什么
  • 企业购买的黄金计入什么科目
  • 私立幼儿园需要转学籍吗
  • 公路工程营改增
  • 发票抄报逾期如何处罚
  • 免税企业土地税怎么交
  • 回迁房怎么交税
  • 企业资产损失会计处理
  • 租赁物丢失如何赔偿
  • 纳税申报有哪些规定
  • 小规模纳税人的税率是多少
  • 存货盘亏应该计什么科目
  • 生产成本属于什么会计要素
  • 小规模减免增值税政策
  • 自己生产的水泥用于建造厂房
  • 盈余公积转增实收资本要交税吗
  • 用商品抵账的会计分录
  • 汇丰银行账户管理费
  • 简易计税发票如何抵扣
  • msmpeng.exe是什么进程
  • 笔记本电脑如何恢复出厂系统
  • php中实现文件上传的函数
  • 固定资产处置的三种情况
  • php的教程
  • 公司购买的大型安装设备什么时候转入固定资产
  • 国家规定不计入社保基数
  • annaconda安装opencv
  • 增值税进项发票丢失最新处理办法
  • error出错
  • 关于眼中的世界的作文
  • php+flash+jQuery多图片上传源码分享
  • 银行贷款入账需要什么
  • 送货运输费用税率
  • 未开票收入是怎么算的
  • 小规模纳税人企业所得税优惠政策最新2023
  • 应付帐款借方余额,但对方公司己注销
  • 分公司和总公司的税务核算
  • 固定资产加速折旧计算方法
  • 在建工程什么情况下算竣工
  • 企业发生的职工福利费支出,不超过工资
  • 确认销售收入时不影响应收账款入账金额的是
  • 电子产品对外加工
  • 个人开运输发票需要的资料哪些?
  • 住宿费发票可以报销吗
  • 小规模纳税人减按1%账务处理
  • 增值税及附加是什么税
  • 银行交党费属于什么业务
  • 个人承包工程如何缴纳税款
  • 会计里计提是什么意思
  • 存出保证金的账务处理
  • win10预览版21301bug
  • 苹果mac最新的系统
  • 神之浩劫能玩吗
  • win7旗舰版系统重装
  • ubuntu系统怎么安装python
  • win7怎么调窗口大小
  • 如何使用ssh
  • win7系统打不开网络和共享中心
  • 不同系统电脑能共享吗
  • 谈谈对环境保护认识话题三分钟
  • jquery的选择器有哪些举例说明
  • unity web端
  • python模块怎么用
  • JQuery.validate在ie8下不支持的快速解决方法
  • javascript中的匿名函数
  • 设置家的地址
  • 广州税务局前局长是谁
  • 云南省地方税务局关于城镇土地使用税
  • 306医院改名什么了
  • 重庆税务局查询缴费记录
  • 代理记账公司账务处理
  • 税务守信激励典型案例
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设