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