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

63 阅读 0 评论 42 点赞

我是靠谱客的博主冷静小松鼠，最近开发中收集的这篇文章主要介绍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: {}
}