问题描述：
 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: {}
 }