简介
响应式布局：一套界面，根据检测设备分辨率情况，进行相应处理，展示不同的布局和内容
自适应布局：多套界面，根据检测设备分辨率情况，返回不同的界面
Meta标签
通过设置meta标签，我们可以对布局进行控制。
meta标签常见用法就是name+content的形式，即将content的内容给予name这个属性值，所以我们可以通过下面方式实现：
<meta name="viewport" content="">
随便提一下，我们常见到meta标签里有 charset=“utf-8” 这种用法，事实上是http-equiv+content的方式，只不过是简写（因为没有提供 name 属性，那么名称/值对中的名称会采用 http-equiv 属性的值）
@media 查询
@media screen and (max-width: 300px) {
body {
background-color:lightblue;
}
}
通过判断尺寸来修改布局
flex弹性盒子
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。
多个对齐方式：flex-start，flex-end，center，space-between，space-around
百分比布局
这个不推荐使用，百分比都是基于父元素的，首先是计算困难，接着就是这个百分比很迷，不同情况下这个百分比是针对不同值的，可能是父元素的高或者宽，也可能是父元素的父元素的宽和高。
特殊单位rem/vw/vh
rem单位是相对于根元素html的font-size来决定大小的。当设备发生变化的时候，只需要改变font-size的值，那么以rem为单位的元素的大小也会发生变化。
vw和vh是根据视口长宽进行变化的，1vw为1%的宽，1vh为1%的高。
Grid网格布局
设为网格布局以后，容器子元素（项目）的float、display: inline-block、display: table-cell、vertical-align和column-*等设置都将失效。
grid通过将划分网格的形式进行布局，网格中内容的尺寸是按比例划分出来的，所以能实现响应式布局。
Columns布局
瀑布式的布局，设置好多少列后就能安排好布局，不同div最后会处在多个列中，不同列是不对齐的，对齐的通常用网格布局。
总结
布局方案一直在变化，用习惯某几种对于处理布局有很大帮助，实际处理了中建议多方案结合的方式，这样在不同设备上都能呈现出好的视觉效果。
