1.移动设备 手机和ipad
系统：安卓系统、ios系统
安卓系统：内置浏览器是谷歌
ios系统：内置Safari浏览器，他们的内核是webkit，不考虑兼容性，需要考虑的是安卓和ios的区别
2.布局
布局考虑：
设备的实际大小，设备的分辨率，厂家（设计者）给的分辨率
页面的大小，设计稿上的大小（设计稿上的大小是多大，开发的页面大小就是多大）
浏览器的视口，浏览器自带的document.documentElement.clientWidth,在移动设备上如果不做处理查看一般默认是980
eg：设备宽是320px，页面宽是1200px，浏览器视口是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）当移动设备和浏览器视口一致时，如果还使用以前的布局，如果页面超过设备宽，超过的部分会被截掉，使用不能使用传统的开发模式了
简单介绍一下弹性布局
（1）分两部分：弹性父级、弹性子元素
（2）给父级设置 display：flex或者inline-flex
flex-direction 属性指定了弹性盒子元素在父容器中的位置
flex-direction的属性值
row 横向从左到右排列(左对齐)，默认的排列方式
row-reverse 反向横向排列(右对齐)从后往前排，最后一项排在最前面
column 纵向排列
column-reverse 反转纵向排列，从后往前排，最后一项拍在最上面
原文：https://www.cnblogs.com/panghexin/p/10826868.html