本质:
响应式布局是同一页面在不同的屏幕上有不同的布局，即只需要一套代码使页面适应不同的屏幕
方式
1.媒体查询
@media
2.百分比
百分比是相对于包含块的计量单位，通过对属性设置百分比来适应不同的屏幕
3.vw&vh:
viewport width viewport height
1vw = 1/100视口宽度 1vh = 1/100视口高度
和百分比是有区别的，百分比时相对于父元素来说的，而vw和vh总是针对于视口来说的。
4.em&rem
a.浏览器: font-size: 10px
b.HTML: 2em = font-size: 20px rem = 20px | html { font-size: 30px } rem = 30px
c.element: em 为自身或继承父级font-size
