自适应布局

注意事项

• 使用 IE 盒模型 box-sizing: broder-box;
• 不固定宽高，使用百分比、 auto 或 calc()
• 使用 @media 查询，针对不同媒体类型定义不同的样式
• 使用 <meta> 标签对 viewport （可视区域） 进行控制
• 选择布局方式
  • 在浏览器支持的情况下，页面大框架推荐使用 Grid 布局 ，局部布局推荐使用 Flex 布局
  • float 与 inline-block 浏览器支持好，但是各有缺点

<template>
  <div class="adaptive-container">
    <div class="adaptive-header">Header</div>
    <div class="adaptive-content">
      <div class="adaptive-content-left">Left</div>
      <div class="adaptive-content-body">
        <div class="adaptive-content-bodyTop">Top Content</div>
        <div class="adaptive-content-bodyBottom">Bottom Content</div>
      </div>
      <div class="adaptive-content-right">Right</div>
    </div>
    <div class="adaptive-footer">Footer</div>
  </div>
</template>

<script>
export default {}
</script>

<style>
*,
*::before,
*::after {
  box-sizing: border-box;
}
/* 此处模拟 body */
.adaptive-container {
  width: 80%;
  margin: 0 auto;
  text-align: center;
  font-size: 2em;
}
.adaptive-header {
  background: rgba(219, 111, 83, 1);
  width: 100%;
  height: 80px;
  line-height: 80px;
  margin: 5px 0;
}
.adaptive-content {
  width: 100%;
}
.adaptive-content-left,
.adaptive-content-body,
.adaptive-content-right {
  float: left;
}
.adaptive-content-left {
  background: rgba(103, 194, 148, 1);
  width: 20%;
  height: 200px;
  line-height: 200px;
}
.adaptive-content-body {
  width: 60%;
  padding: 0 5px;
}
.adaptive-content-bodyTop {
  background: rgba(89, 167, 209, 1);
  height: 145px;
  line-height: 145px;
  margin-bottom: 5px;
}
.adaptive-content-bodyBottom {
  background: rgba(89, 167, 209, 1);
  height: 250px;
  line-height: 250px;
}
.adaptive-content-right {
  background: rgba(242, 164, 68, 1);
  height: 300px;
  line-height: 300px;
  width: 20%;
}
.adaptive-footer {
  background: rgba(129, 140, 148, 1);
  width: 100%;
  height: 100px;
  line-height: 100px;
  margin: 5px 0;
}
.adaptive-content::after {
  content: '';
  clear: both;
  display: block;
}

@media only screen and (max-width: 1024px) {
  .adaptive-content-left {
    width: 30%;
  }
  .adaptive-content-body {
    width: 70%;
  }
  .adaptive-content-right {
    width: 100%;
    margin-top: 5px;
    height: 100px;
    line-height: 100px;
  }
}
@media only screen and (max-width: 768px) {
  [class*='adaptive-content-'] {
    width: 100%;
  }
  .adaptive-content-body {
    padding: 0;
  }
  .adaptive-content-bodyTop {
    margin-top: 5px;
  }
  .adaptive-content-bodyBottom {
    margin-bottom: 5px;
  }
  .adaptive-content-right {
    margin-top: 0;
  }
}
</style>