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

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

# 解决方案：
第一步：最外层div样式 ：
fixed（固定定位）：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定
display:flex 是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。是W3C提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。
width: 100%，height: 100%：实现页面宽高在不同窗口下都能占满整个屏幕。

.websit{undefined
position: fixed;
display: flex;
width: 100%;
height: 100%;
}

第二步：整体页面样式分三部分，分别是页面头部的：header-two，内容部分：main，页面底部的footer，
其中，头部和底部高度是不变的，中间内容部分的高度=页面高度-头部高度-底部高度，如下
给页面最外层div设置高度：自动获取当前浏览器高度，页面初始化的时候自动获取：

header-two {undefined
padding: 0;（内边距为0）
width: 100%;（宽度自动占满）
text-align: center;（内容居中显示）
height: 80px !important;（设置固定高度）
}
.footer {undefined
padding: 0;
width: 100%;
text-align: center;
height: 126px !important;
}
:style="{minHeight :minHeight +‘px’}"
mounted() {undefined
this.minHeight = document.documentElement.clientHeight - 0;
this.marginLeft = (document.documentElement.clientWidth - 1920) / 2;
const that = this;
window.onresize = function () {undefined
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{undefined
margin: auto;
text-align: center;
min-width: 1920px !important;
max-width: 1920px !important;
}
第四步：为header-div和footer-div，设置向左偏移:style="{marginLeft:marginLeft + ‘px’ }"
第五步：中间内容过多时，会产生滚动弄条，我们想让滚动条产生在最外层，也就是，中间元素被撑开，因此设置属性
.main {undefined
overflow: visible;
}
A元素具有 overflow: visible 的属性，内层内容比较多时，分两种情况讨论
A元素高度auto：无作用，A元素撑开，正常滚动
A元素具有固定高度：虽然A限制的高度，但内层内容并不会隐藏，而是完全显示在屏幕上，参与布局，甚至撑开外层dom高度
第六步：涉及背景是图片，图片实现自适应，如下

header-first {undefined
padding: 0;
width: 100%;
text-align: center;
background-repeat: no-repeat;
height: 292px !important;
background-image: url(’…/aa.png’);
background-size: cover; /* 使图片平铺满整个浏览器（从宽和高的最大需求方面来满足，会使某些部分无法显示在区域中） */
代码如下：
export default {undefined
name: ‘ContainerMoudle’,
components: {Footer, WebsitHeaderTwo},
data() {undefined
return {undefined
minHeight: 0,
marginLeft: 0
}
},
mounted() {undefined
this.minHeight = document.documentElement.clientHeight - 0;
this.marginLeft = (document.documentElement.clientWidth - 1920) / 2;
const that = this;
window.onresize = function () {undefined
that.minHeight = document.documentElement.clientHeight - 0;
that.marginLeft = (document.documentElement.clientWidth - 1920) / 2
};
},
methods: {}
}

————————————————
原文链接：https://blog.csdn.net/weixin_44039043/article/details/109393574