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

这篇具有很好参考价值的文章主要介绍了vue自适应布局(各种浏览器,分辨率)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.前言

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

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

预览图片如下 :

vue自适应布局,vue,vue.js,前端,javascript

现在布局实现的是头,左侧菜单,尾部固定,内容区域自适应布局的方案,最重要的是需要解决的是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,三个子组件

vue自适应布局,vue,vue.js,前端,javascript

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

vue自适应布局,vue,vue.js,前端,javascript

 3.测试效果

谷歌浏览器,大小缩放等:

vue自适应布局,vue,vue.js,前端,javascript

 屏幕放大效果:vue自适应布局,vue,vue.js,前端,javascript

 4.总结

主要使用了flex布局的flex:1属性和自适应的css+vh+百分比这种方式,开局设置overflow:hidden,主体main部分要设置:overflow:auto,这种方式可以自动使得菜单的滚动条和内容的滚动条在一个区域内滚动,后续我会把完整代码放在个人主页KinHKin的博客_CSDN博客-vue,中秋活动,性能优化领域博主

的资源里面,供大家免费下载,希望大家能够喜欢💗💗💗 文章来源地址https://www.toymoban.com/news/detail-785580.html

到了这里,关于vue自适应布局(各种浏览器,分辨率)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue项目实现自适应屏幕分辨率

    npm install postcss-px2rem px2rem-loader --save 在根目录src中新建utils目录下新建rem.js等比适配文件 3、在main.js中引入适配文件 4、到vue.config.js中配置插件 ***********************************  第二种(大屏可用)*********************************** 在外层文件中(包含所有的子组件)

    2024年02月13日
    浏览(33)
  • 整理各种Vue项目在IE浏览器白屏报错 SCRIPT1002:语法错误

    目录 一、关于 sockjs-client 依赖包 二、关于 highlight 依赖包 三、关于 swiper 依赖包 四、IE 不支持 ES6 语法 五、第三方插件引入导致 六、本地环境正常,生产环境仍旧白屏 这篇文章主要介绍了 Vue 项目在 IE 浏览器显示白屏并报错 SCRIPT1002: 语法错误 的案例 Bug 背景 :接手一个新

    2024年02月06日
    浏览(44)
  • 前端css + js +vue +element-ui 实现响应式布局,根据浏览器窗体大小自动响应

    我的环境是element-ui vue版的,其他的也可以,主要是css和js的内容 首先在data中定义一个对象 其实就是css的样式,不过放在了js 里面而已 这里css设置了两个属性 一个是transform 这个属性对div标签的缩放作用,当浏览器窗口或者屏幕大小改变时,就调整这个属性的值,来等比缩放

    2024年02月13日
    浏览(62)
  • vue2+datav可视化数据大屏(3)附自适应各分辨率的大屏框架git代码。

    接上一节所说,当我们将接口封装完了后,我们需要给大屏进行内容填充啦         📓 我们在ser-views文件夹下新建9个vue组件,如下图所示,我给编号为1到9          📓在组件里写入内容我是第一块...一次类推,一直到第九块         📓 在主容器中引入组件,并注册

    2024年04月14日
    浏览(72)
  • HTML标签根据浏览器窗口大小自适应

    1.使用calc实现自适应 (需要父盒子宽高固定) 2.使用flex布局,两栏布局,三栏布局 文章就到这里啦,本人功力尚浅,若有不妥之处请谅解指正,谢谢!

    2024年02月11日
    浏览(53)
  • Angular:根据浏览器缩放比例,自适应窗口大小

    实际生产过程中,客户有时会提出一些界面优化的需求。拿到需求后,你会发现与前端框架设计理念背道而驰,但也要尽量满足,因为客户就是上帝。 前不久,就接到一个优化需求,客户要求缩放屏幕,界面要自动适应屏幕大小。当时我脑海里闪现了几个字:“太残暴了”!

    2024年02月04日
    浏览(43)
  • 【移动端网页布局】移动端网页布局基础概念 ④ ( 物理像素 | 物理像素比 | 代码示例 - 100 像素在 PC浏览器 / 移动端浏览器 显示效果 )

    移动端 网页开发 与 PC 端开发有很多不同之处 , 在图片处理方向需要采用 二倍图 / 三倍图 / 多倍图 方式进行图片处理 ; 图片处理的方式与如下的 物理像素 与 物理像素比 概念相关 ; 物理像素 : 物理像素就是 设备 上的分辨率 , 如 1920 x 1080 像素 , 就是宽度上有 1920 个像素 , 高

    2023年04月23日
    浏览(49)
  • 网页布局(解决浏览器缩放页面乱版问题)

    主要解决两个问题: 1. div盒子随Ctrl+【+/-】缩放而缩放的问题 2. 最小化窗口然后进行缩放页面的布局问题 3. 顶部导航固定问题 ### 第一个问题,则需了解 (1) 容器的布局:margin: auto、定位等等 (2) 尺寸单位:具体尺寸、可视尺寸(vh、vw)、百分比尺寸 ### 第二个问题,则需了解

    2024年02月04日
    浏览(57)
  • Unity: WebGL发布后在浏览器上运行时窗口大小自适应

     这个效果是根据19:6(也就是1920:1080的页面大小来设计的) 整体来说修改以下两个文件来进行达成效果预览,第一个是index.html、第二个是TemplateData文件下的style.css文件 修改对比  其中上图一段注释的脚本是webgl进入全屏状态的的脚本,就是显示下图的脚本(去掉就不显示

    2024年02月16日
    浏览(52)
  • 浏览器有哪几种缓存?各种缓存之间的优先级

    在浏览器中,有以下几种常见的缓存: 1、强制缓存 :通过设置 Cache-Control 和 Expires 等响应头实现,可以让浏览器直接从本地缓存中读取资源而不发起请求。 2、协商缓存: 通过设置 Last-Modified 和 ETag 等响应头实现,可以让浏览器发送条件请求,询问服务器是否有更新的资源

    2024年02月11日
    浏览(47)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包