在开始移动端布局前要先了解一下设备宽度，页面大小，浏览器视口三者之间的区别
设备宽度：实物设备的大小，设备的分辨率，具体数据是设备生产的厂家给的。
页面大小：设计稿上规定的页面的宽度和高度
浏览器视口：浏览器自带的用document.documentElement.clientWidth查看，在移动设备上如果不做视口处理一般默认是980
在写移动端的时候，我们需要将这三者统一：
1.将设备宽与浏览器窗口统一
在head之间加一个meta标签 name=“viewport”，代码如下
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
2.当设备宽与浏览器窗口一致了，如果还使用原来的页面布局方式，当页面的宽超出设备的宽时，超出的部分会被截掉。不能使用传统的页面开发模式了。我们就引入了新的布局方式：
1.弹性布局（弹性盒子）
1.分俩部分 弹性父级 弹性子元素
2.给父级设置display:flex或inline-flex
flex-direction 指定弹性盒子中子元素的排列方式，他的值有
row：横向从左到右排列（左对齐），默认的排列方式。
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。）
column：纵向排列。
column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。
2.流式布局（百分百布局） //待补充
3.响应式布局 //待补充
4.rem布局 //待补充