1、 piexl 像素知识
640 * 1136的图片能不能在iphone5上完全展示？ iphone5分辨率640*1136
逻辑像素与物理像素的关系 px逻辑像素：浏览器使用的抽象单位 dp，pt物理像素：设备无关像素 dpr：设备像素缩放比 计算公式：1px = (dpr)^2 * dp iphone5的 dpr = 2；
DPI:打印机每英寸可以喷的墨汁点（印刷行业） PPI:屏幕每英寸的像素数量，即单位英寸内的像素密度 目前，在计算机显示设备参数描述上，二者意思一致 计算公式：以iphone5为例：ppi = √（1136^2 640^2）/4 = 326ppi（视网膜retina屏） 注意：单位为硬件像素（物理像素），非px PPI越高，像素数越高，图像越清晰。但可视度月低（小），系统默认缩放比越大。 retina屏（高清屏）：dpr都是>=2。
2、 viewport
手机浏览器默认为我们做了两件事情： ① 页面渲染在一个980px（ios）的viewport ② 缩放
为什么要有viewport？ 一个300多像素的屏幕，放一个1000多像素的页面，会混乱，所以要先虚拟一个980像素的页面，然后进行缩放。
度量|视口 visual viewport ==== 窗口缩放scale 布局 layout viewport
设计移动web，为什么不使用默认的980px的布局viewport？ ① 宽度不可控制，不同系统的设备默认值都可能不同 ② 页面缩小版显示，交互不友好 ③ 链接不可点 ④ 有缩放，缩放后又有滚动 font-size为40px等于pc上12px同等物理大小，不规范
3、 meta标签
移动web最佳viewport设置： 布局viewport = 设备宽度 = 度量viewport <meta name=” viewport” content = “width=device-width, initial-scale = 1, user-scalable = no”>
4、 设计移动web
方案一：根据设备的实际宽度来设计（常用）（不缩放）
手机宽320px，我们就拿320px设计。
方案二：1px = 1dp，易解决高清问题
缩放0.5。根据设备的物理像素dp等于抽象像素px来设计。1px像素边框和高清图片都不需要额外处理。
以方案一为例，将pc端页面改成适应移动端的页面：
在移动开发过程中要学会做减法，一些不太重要的东西可以隐藏起来。
5、 使用什么布局？
很多网站都是使用固定布局，以前凡客、淘宝也有段时间使用过流式布局，现在都改成固定布局。 但是固定布局不适合移动开发。
可以使用
① 响应式布局：responsive 高清图片 retina px em rem ② flex弹性盒子布局：高效居中方案 等比例填充列行 background-size font-size 多行文本溢出
6、 flexbox弹性盒子布局
根据元素个数不同，自动填充 display:-webkit-flex; 表示使用弹性布局 子元素设置 flex:num; 占容器的比例
划分方式：
① 等比划分（flex:num;表示）
② 混合划分（有固定的像素（eg：100px）与flex:num;混合在一起）
③ 不定宽高的水平垂直居中：
代码语言：javascript复制position：absolute；
top：50%；
left：50%；
transform：translate（-50%，-50%）；flexbox版不定宽高的水平垂直居中：
代码语言：javascript复制.parent{
justify-content : center; //子元素水平居中
align-items : center; //子元素垂直居中
display : -webkit-flex;
}flexbox弹性盒子布局，介于兼容性问题，建议使用旧版方案：
①新flex布局：
代码语言：javascript复制display : -webkit-flex;
-webkit-fiex: 1; //子元素的flex
justify-content : center;
align-items : center; ②旧flexbox布局：
代码语言：javascript复制display : -webkit-flex-box;
-webkit-fiex-box: 1; //子元素的flex
box-pack : center;
box-center: center; 一种垂直居中的hack：
（1）hack方式
代码语言：javascript复制li{
line-height: 568px;
vertical-align:middle;
}
li img{
vertical-align:middle;
}(2)更优雅的方式，对于高级浏览器来说
代码语言：javascript复制// 父元素
position:absolute;// 子元素
li{
display: table-cell;/*盒模型变成表格的元素*/
vertical-align: middle;
}(3)另一种垂直居中方式
代码语言：javascript复制li{
display: -webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;
}
