响应式布局之百分比布局

响应式布局即是一个页面能适应不同的终端，且能够呈现良好的显示效果。本文主要介绍一些平时做项目会用到的方法，复杂的项目也会同时用到其中的几种，根据项目实际情况进行选择。

百分比布局（流式布局）

百分比是一种相对于包含块的计量单位。利用对属性设置百分比来适配不同屏幕，注意这里的百分比是相对于父元素；

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. 代码示例

在不同尺寸下显示不同

QQ图片20190820015418.png

QQ图片20190820015449.png