vue+elementui项目中,页面实现自适应,缩小放大页面排版基本保持不变

问题描述:
vue+elementui项目中,页面实现自适应,缩小放大页面排版基本保持不变

# 解决方案:
第一步:最外层div样式 :
fixed(固定定位):生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定
display:flex 是一种布局方式。它即可以应用于容器中,也可以应用于行内元素。是W3C提出的一种新的方案,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持。
width: 100%,height: 100%:实现页面宽高在不同窗口下都能占满整个屏幕。
.websit{
position: fixed;
display: flex;
width: 100%;
height: 100%;
}
第二步:整体页面样式分三部分,分别是页面头部的:header-two,内容部分:main,页面底部的footer,
其中,头部和底部高度是不变的,中间内容部分的高度=页面高度-头部高度-底部高度,如下
给页面最外层div设置高度:自动获取当前浏览器高度,页面初始化的时候自动获取:
header-two {
padding: 0;(内边距为0)
width: 100%;(宽度自动占满)
text-align: center;(内容居中显示)
height: 80px !important;(设置固定高度)
}
.footer {
padding: 0;
width: 100%;
text-align: center;
height: 126px !important;
}
:style="{minHeight :minHeight +‘px’}"
mounted() {
this.minHeight = document.documentElement.clientHeight - 0;
this.marginLeft = (document.documentElement.clientWidth - 1920) / 2;
const that = this;
window.onresize = function () {
that.minHeight = document.documentElement.clientHeight - 0;
that.marginLeft = (document.documentElement.clientWidth - 1920) / 2
};
}
第三步:
这里header-two 下面还要加一个div,header-div,并为其设置项目要求的最小宽度,和最大宽度,这里设置为1920,保证缩放时的样式正常,同理,底部也要加上一个div,footer-div。
header-div,footer-div{
margin: auto;
text-align: center;
min-width: 1920px !important;
max-width: 1920px !important;
}
第四步:为header-div和footer-div,设置向左偏移:style="{marginLeft:marginLeft + ‘px’ }"
第五步:中间内容过多时,会产生滚动弄条,我们想让滚动条产生在最外层,也就是,中间元素被撑开,因此设置属性
.main {
overflow: visible;
}
A元素具有 overflow: visible 的属性,内层内容比较多时,分两种情况讨论
A元素高度auto:无作用,A元素撑开,正常滚动
A元素具有固定高度:虽然A限制的高度,但内层内容并不会隐藏,而是完全显示在屏幕上,参与布局,甚至撑开外层dom高度
第六步:涉及背景是图片,图片实现自适应,如下
header-first {
padding: 0;
width: 100%;
text-align: center;
background-repeat: no-repeat;
height: 292px !important;
background-image: url(’…/aa.png’);
background-size: cover; /* 使图片平铺满整个浏览器(从宽和高的最大需求方面来满足,会使某些部分无法显示在区域中) */
代码如下:

export default {
name: ‘ContainerMoudle’,
components: {Footer, WebsitHeaderTwo},
data() {
return {
minHeight: 0,
marginLeft: 0
}
},
mounted() {
this.minHeight = document.documentElement.clientHeight - 0;
this.marginLeft = (document.documentElement.clientWidth - 1920) / 2;
const that = this;
window.onresize = function () {
that.minHeight = document.documentElement.clientHeight - 0;
that.marginLeft = (document.documentElement.clientWidth - 1920) / 2
};
},
methods: {}
}

  • 10
    点赞
  • 79
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
Vue.js 是一个流行的 JavaScript 框架,它是一款轻量级、高性能的渐进式框架,适用于构建单页面应用程序和更大规模的应用程序。ElementUI 是一款基于 Vue.js 的组件库,提供了丰富的 UI 组件和交互式构建工具,能够帮助开发人员快速构建美观、易于使用的前端页面。 在使用 Vue.js 和 ElementUI 实现前端页面时,可以通过以下几个方面进行可行性分析: 1. 技术选型分析:Vue.js 和 ElementUI 是成熟的前端框架和组件库,它们具有丰富的功能和良好的文档支持,易于学习和使用。因此,从技术角度来看,使用 Vue.js 和 ElementUI 实现前端页面是可行的。 2. 项目需求分析:在确定使用 Vue.js 和 ElementUI 实现前端页面之前,需要对项目需求进行分析和评估,确定是否需要使用这些框架和组件库。如果项目需要构建大型的单页面应用程序或需要使用复杂的 UI 组件,那么使用 Vue.js 和 ElementUI 可以提高开发效率和用户体验。 3. 团队技能评估:如果团队已经熟练掌握了 Vue.js 和 ElementUI 的使用,那么使用这些框架和组件库实现前端页面的可行性更高。如果团队没有相关技能,需要考虑学习和培训的成本。 4. 性能评估:在使用 Vue.js 和 ElementUI 实现前端页面时,需要对性能进行评估,确保页面响应速度和用户体验。可以使用各种工具和技术来优化性能,如使用懒加载、减少 HTTP 请求等。 综上所述,使用 Vue.js 和 ElementUI 实现前端页面是可行的,但需要进行技术选型分析、项目需求分析、团队技能评估和性能评估等方面的考虑。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值