一. 什么是webApp？
webApp顾名思义，就是网页版的APP，就是用css、HTML、js代码写成的APP，虽然看着像是用安卓或者iOS中组件写的，但是其实是用js中一些新增的方法实现的。相对于原生的优势在于可以无视安卓和iOS之间的差距，可以写一份代码，编程成适合iOS和安卓系统的APP。
二. webApp基础知识点
1. 像素
是指在由一个数字序列表示的图像中的一个最小单位，称为像素。
2. 物理像素
设备像素(device pixel, dp): 又称为物理像素。指设备能控制显示的最小物理单位，意指显示器上一个个的点。从屏幕在工厂生产出的那天起，它上面设备像素点就固定不变了，单位 pt。pt 在 css 单位中属于真正的绝对单位，1pt = 1/72(inch), inch及英寸，而1英寸等于2.54厘米。所以设备像素的特点就是大小固定，不可变。比如 iPhone 5 的分辨率为 640 x 1136px.
- dp也就是dip;
- dp是与密度无关，sp除了与密度无关外，还与scale无关
- 不同设备有不同的显示效果,设备独立像素和设备硬件有关
3. 像素密度
- 就是一英寸宽高的面积内，有多少个像素点。
- 同等面积下的像素点越多，显示的越清晰。
- 像素密度 =√{(长度像素数^2+宽度像素数^2)}/屏幕尺寸
分辨率 - 设备垂直跟水平方向像素的数量
4. 逻辑像素
- CSS像素，viewport中的一个小方格，CSS样式代码中使用的是逻辑像素。如果在一个设备中，物理像素与逻辑像素相等，将不会产生任何问题。但是，在iphone 4中，物理像素是640px960px，而逻辑像素数为320480px。因此，需要使用大约4个物理像素来显示一个CSS像素。
5. 屏幕尺寸
屏幕对角线的长度，单位英寸
| 在苹果的规范中，meta viewport 有6个可以设置的内容 | |
| width | 设置layout viewport 的宽度，为一个正整数，或字符串"device-width" |
| initial-scale | 设置页面的初始缩放值，为一个数字，可以带小数 |
| minimum-scale | 允许用户的最小缩放值，为一个数字，可以带小数 |
| maximum-scale | 允许用户的最大缩放值，为一个数字，可以带小数 |
| height | 设置layout viewport 的高度，这个属性对我们并不重要，很少使用 |
| user-scalable | 是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许 |
三. webApp开发
- 百分比布局(百分比是相对于父容器而定的)。
- 大布局用百分比，小布局可以用px写死。
布局方式：
1. 圣杯双飞燕
- 其实就是同时三个盒子要在一行显示，并且，两边的盒子固定宽高，中间盒子要百分比布局，这个时候就可以让两边的盒子定位，然后中间盒子自动会和那两个盒子一行显示。
2. 固定宽高
- 就是给盒子固定宽高，以px为单位，这种方式虽然不会让布局打乱，但是所有设备都是一样的，大都是在pc端见到，这种显示在手机端上会缩小
3. 流式布局
- 给布局的盒子一个相对的百分比宽度，高度不定，通常以百分比为单位。
4.栅格化布局
- 就是将网页等分分成几等分的长度，然后按照每个表格占多少百分比这样布局。
- 这种布局出来的网页显得很规整，但是显得太过死板，但是如果跟媒体查询结合之后，就可以做出响应式开发模式了
5. 响应式布局
- 就是按照设备宽度，给出对应的布局。
- 优势：用一套页面可以在不同分辨率设备下显示不同的布局效果，这样可以让终端阅读体验更好。
- 需要引入外部框架（bootstrap）
- 需要引入外部jQuery文件(因为bootstrap.js是基于jQuery的)
##** 四、移动端手指事件**
- touchstart:手指触摸就触发该事件
- touchmove：手机移动触发该事件，只要手机移动，就会一直触发
- touchend：手指离开屏幕出发该事件
评论加载中