位置: 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(前端传给后端)

  • 荣耀flypods3耳机怎么连接手机(荣耀flypods3耳机怎么恢复出厂设置)

    荣耀flypods3耳机怎么连接手机(荣耀flypods3耳机怎么恢复出厂设置)

  • 苹果13手电筒怎么关(苹果13手电筒怎么拉到桌面)

    苹果13手电筒怎么关(苹果13手电筒怎么拉到桌面)

  • oppo手机自带步数怎么设置(oppo手机自带步数不显示了,怎么办)

    oppo手机自带步数怎么设置(oppo手机自带步数不显示了,怎么办)

  • 怎么取消手机和ipad软件同步(怎么取消手机和ipad电话来电)

    怎么取消手机和ipad软件同步(怎么取消手机和ipad电话来电)

  • 荣耀x10max如何打开智慧识屏(荣耀x10max如何打开内部nfc)

    荣耀x10max如何打开智慧识屏(荣耀x10max如何打开内部nfc)

  • 微信怎样隐藏电话号码(微信怎样隐藏电话号码关了,为什么别人手机还看到)

    微信怎样隐藏电话号码(微信怎样隐藏电话号码关了,为什么别人手机还看到)

  • 美团券密码在哪里查看(美团劵密码是啥)

    美团券密码在哪里查看(美团劵密码是啥)

  • 提醒软件有病毒继续安装吗(提示有病毒的软件真的有病毒吗)

    提醒软件有病毒继续安装吗(提示有病毒的软件真的有病毒吗)

  • iphone蜂窝网络错误怎么办(iPhone蜂窝网络错误是什么原因)

    iphone蜂窝网络错误怎么办(iPhone蜂窝网络错误是什么原因)

  • excel中的电子工作表具有(excel中的电子工作表具有几维结构)

    excel中的电子工作表具有(excel中的电子工作表具有几维结构)

  • 在抖音买东西不发货怎么办(在抖音买东西不发货去哪投诉)

    在抖音买东西不发货怎么办(在抖音买东西不发货去哪投诉)

  • qq找回密码出现error什么意思(qq找回密码出现网络异常或不稳定怎么解决)

    qq找回密码出现error什么意思(qq找回密码出现网络异常或不稳定怎么解决)

  • 苹果电脑除号是哪个键(苹果电脑的除号是哪一个键)

    苹果电脑除号是哪个键(苹果电脑的除号是哪一个键)

  • 腾讯会议私聊主持人能看到吗(腾讯会议私聊主持人能看到记录吗)

    腾讯会议私聊主持人能看到吗(腾讯会议私聊主持人能看到记录吗)

  • 3d渲图特别慢怎么办(3d渲染图太慢了怎么办)

    3d渲图特别慢怎么办(3d渲染图太慢了怎么办)

  • 网络显示已连接不可上网(网络显示已连接需要登录认证)

    网络显示已连接不可上网(网络显示已连接需要登录认证)

  • 苹果耳机盒子怎么充电(苹果耳机盒子怎么查真伪)

    苹果耳机盒子怎么充电(苹果耳机盒子怎么查真伪)

  • 麒麟710用多久会卡(麒麟710的手机还能再用几年)

    麒麟710用多久会卡(麒麟710的手机还能再用几年)

  • word文档怎样弄目录(word文档怎样弄封面)

    word文档怎样弄目录(word文档怎样弄封面)

  • 手机像素越高越清晰吗(手机像素越高越占内存吗)

    手机像素越高越清晰吗(手机像素越高越占内存吗)

  • oppo手机怎么自动清灰(oppo手机怎么自定义来电铃声)

    oppo手机怎么自动清灰(oppo手机怎么自定义来电铃声)

  • 安卓手机ip是固定的吗(安卓手机ip是固定地址吗)

    安卓手机ip是固定的吗(安卓手机ip是固定地址吗)

  • 苹果6nfc功能在哪里(苹果6nfc功能在手机哪里)

    苹果6nfc功能在哪里(苹果6nfc功能在手机哪里)

  • 手机网速降到1m能用吗(手机网速降到128kb是多慢)

    手机网速降到1m能用吗(手机网速降到128kb是多慢)

  • 华为nova4e后盖是什么材质(nova 4e后盖多少钱)

    华为nova4e后盖是什么材质(nova 4e后盖多少钱)

  • 怎么关闭快手小店(怎么关闭快手小黄车)

    怎么关闭快手小店(怎么关闭快手小黄车)

  • ireike.exe - ireike是什么进程 有什么作用

    ireike.exe - ireike是什么进程 有什么作用

  • 【微信小程序】使用uni-app——开发首页搜索框导航栏(可同时兼容APP、H5、小程序)(微信小程序在哪里找?)

    【微信小程序】使用uni-app——开发首页搜索框导航栏(可同时兼容APP、H5、小程序)(微信小程序在哪里找?)

  • 企业所得税属于地方税吗
  • 个税计算方法和规定
  • 什么时候做计提的会计分录
  • 个人先进奖励要缴纳个税吗
  • 城市基础设施配套有哪些
  • 合伙企业注销流程图
  • 回收废品残料会计分录
  • 电商刷单返现如何做账务处理合适?
  • 小规模纳税人取得的专票转为一般纳税人之后能抵扣吗
  • 房产公司收到的增值税
  • 房地产开发企业预收款预缴增值税
  • 招行理财产品哪些可靠
  • 出口退税注销备注怎么填
  • 做服装批发要具备哪些条件
  • 进项票异常如何自查
  • 电子发票可以打多少行
  • 数字证书费
  • 企业发放给员工子女抚养费
  • 公司聚餐一定要去吗
  • 夫妻双方交契税可以一人到嘛
  • 环保税是甲方交的吗
  • 4s店付款
  • 产值和营业收入哪个数值大
  • 小规模纳税人核定征收标准
  • bios里硬盘是哪个
  • linux 阿里云源
  • 自创商誉是否能入账
  • 非货币性资产投资的会计处理
  • 销货退回与折让属于什么科目
  • 变动成本法计算营业利润
  • 调整以前年度损益调整分录费用调增
  • img标签铺满div
  • php graph
  • vue监听页面加载完毕
  • 前端从后端拿excel文件
  • php教程从入门到精通
  • 织梦cms要钱吗
  • 子公司使用母公司固定资产
  • 法人为什么不能领取失业金
  • 有什么是即征即退税的
  • 公司申请破产后债务谁来还
  • 出差补贴要不要发票呢?
  • 资本公积和盈余公积是什么意思
  • 汇算清缴利润调增70万会预警吗
  • 出口退税三类企业影响
  • 装修公司让客户承担税费是否合理
  • 跨月的普通发票能作废吗
  • 职工教育经费能开专票吗
  • 工会经费怎么计提及使用
  • 纸质承兑汇票怎么兑现步骤
  • 长期挂账其他应付款处理
  • 劳务费无发票怎么处理
  • 亏损企业所得税汇算清缴后调减
  • 机票开的个人的票是什么
  • 银行受理汇票贴现业务
  • 现金流量表的编制基础是权责发生制
  • 印花税是本月交上个月的吗
  • mac chrome浏览器插件
  • 虚拟机中的centos怎么联网
  • vcspawn.exe什么意思
  • ubuntu configure
  • /etc/rc.d/rc与/etc/rc.d/init.d的关系介绍
  • win7使用率
  • 微软正式推出wind...
  • windows 7中,执行应用程序的方法有哪几种?
  • win7如何删除网络上的其它计算机
  • win7如何取消开机启动
  • win8系统触摸板按键不能用
  • 深入浅出android开发
  • javascript怎么学
  • javascriptjs
  • dos怎么上网
  • 手游频繁崩溃怎么解决
  • bootstrap要学到什么程度
  • 广东省地方税务局发票查询
  • 上海市国家税务局
  • 开票软件提示连接服务器失败怎么办
  • 企业改制和重组的区别
  • 9月份公积金什么时候扣
  • 税务总局全国增值税发票查验平台
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设