移动开发知识技能

1：dp dt device independent pixels 设备无关像素

2：dir：devicePixelRatio 设备像素缩放比

3：计算公式1px=（dpr）的平方 * dp

4:DPI 打印机每英寸可以喷得墨汁点（印刷行业）

5：PPI ：屏幕每英寸的像素数量 即单位内的像素密度

6：ppi=（1136的平方+640的平方）/4=331ppi （视网膜Reina屏）

7：display ：webkit-flex：使用的弹性布局

：flex ：num 占容器的比例

8：不管宽高的水平垂直剧中 ：

：position： absolute ：top：50% ：left：50% : z-index:3 ：-webkit-transform：translate（-50%，-50%） ：border-radius：6px ：background：#fff

9：flexbox 版 不定宽高的水平垂直居中

：justify-content：center ：align-items：center ：display: -webkit-flex

10：弹性图片

：max-width：100%

11：响应式设计 ：重新布局 显示与隐藏

：当页面到达手机屏幕宽度时，很多时候要放弃一些传统的页面设计思想 ：力求页面简单。简介 ：1 同比例缩小元素尺寸 ：2 调整页面结构布局 ：3 隐藏冗余的元素 ： 经常需要切换位置元素使用（绝对定位）减少重绘提高渲染能力

12：一像素边框

：同样是在retina屏幕下的问题 根本原因 1px 使用2dp渲染 ：border：.5px 错误 ：仅仅ios8 可以用 : sacley（.5）

13:单行文本溢出

：overflow：hidden ：white-spance：nowrap ：text-overflow：ellipsis

14：多行文本溢出

：display：-webkit-box：！important ：overflow：hidden : text-oveflow:ellisis : word-break:break-all :-webkit-box-orient:vertical: :-webkit-line-clamp 2;

15: 300 毫秒的故事

：移动web页面上的click事件都要慢上300ms

:

16：tap 基础事件

: 300ms 延迟怎么破 使用Tap时间代替 click 事件 ：自定义Tap事件 ：在touchstart touchend 时记录时间 手指位置 在touched 时比较 ：如果手指位置为同一位置（或允许移动一个非常小的位移值）且 ：时间较短 （一般认为是200ms） 且过程中未曾出发过touchmove ：即可认为手持设备上的“click” 一般称他为“tap”

17: touch 基础事件

：touchstart：手指触摸屏幕时触发（已经有手指在屏幕上不会出发） ：touchmove：手指在移动屏幕滑动。连续出发 ：touchend ： 手指离开屏幕时触发 ：touchcancel：系统取消touch时候出发（不常用）