移动开发知识技能

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时候出发（不常用）