响应式布局即是一个页面能适应不同的终端，且能够呈现良好的显示效果。本文主要介绍一些平时做项目会用到的方法，复杂的项目也会同时用到其中的几种，根据项目实际情况进行选择。
百分比布局（流式布局）
百分比是一种相对于包含块的计量单位。利用对属性设置百分比来适配不同屏幕，注意这里的百分比是相对于父元素；
1. 究竟相对于谁的百分比？
有父元素则相对于父元素的宽度，无父元素则相对于浏览器窗口的宽度；
2. CSS中常用属性的百分比
| 子元素 | 父元素 |
|---|---|
| width | 基于父级的width |
| height | 基于父级的height |
| margin（top,right,bottom,left） | 基于父级的width |
| padding（top,right,bottom,left） | 基于父级的width |
| left,top,right,bottom | 基于父元素的width，height，width，height |
| font-size | 基于继承得到的font-size |
| line-height | 基于当前字体的font-size |
| transform(left, top) | 基于自身的left， top |
3. 代码示例
<style>
* {
padding: 0;
margin: 0;
}
div {
float: left;
box-sizing: border-box;
}
.clear::after {
content: '';
display: block;
clear: both;
}
.wrap {
float: none;
max-width: 1200px;
min-width: 480px;
margin: 0 auto;
border: 2px solid black;
}
.m1, .m2, .m3 {
border: 2px solid black;
height: 200px;
}
.m1 {
width: 30%;
background: red;
}
.m2 {
width: 50%;
background: green;
}
.m3 {
width: 20%;
background: blue;
}
</style>
<div class="wrap clear">
<div class="m1"></div>
<div class="m2"></div>
<div class="m3"></div>
</div>
在不同尺寸下显示不同
QQ图片20190820015418.png
QQ图片20190820015449.png
