一. 移动布局
移动设备: 手机 和 ipad
安卓系统(内置浏览器是谷歌) 和 ios系统(内置Safari浏览器) 它们的内核都是webkit,所以不考虑兼容性,只需要考虑安卓和ios系统的区别
二.布局
设备宽度:设备的实际大小 设备的分辨率 是厂家给的
页面的大小: 是设计稿上的大小
浏览器的视口: 浏览器自带的用document.documentElement.clientWidth查看,在移动设备上如果不做视口处理一般都是默认的980；
例子: 设备的宽是320 页面宽是1200 浏览器视口是980px 三者不统一,我们用移动设备看页面,浏览器的视口会自动缩小，以100%完整展示页面,就会变得不清楚，特别挤，我们需要把这三者变统一
1.移动设备宽(320)和浏览器视口宽（980）一致
在head标签之间加一个meta标签 name="viewport"
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
设备宽度和浏览器视口一致时,如果页面宽大于这个数字,就会出现滚动条。
2.当移动设备和浏览器视口一致时，如果还使用以前的布局，如果页面超过设备宽，超过部分会被截掉。不能使用传统的开发模式了。
弹性布局:分为两个部分 弹性父级和弹性子元素
给父级设置display：flex或inline-flex。
flex-direction 指定弹性盒子中的子元素的排列方式
row:横向从左到右排列（左对齐）默认排列方式
row-severse:反转横向排列（右对齐，从后往前排，最后一项排在最前面）。
column：纵向排列
column-reverse：反转纵向排列，从后往前排，最后一项排在最上面
流式布局:(百分百布局)
响应式布局
rem布局