JQ移动简洁

移动web框架
  1.1，UI层。负责页面布局，可自行实现或使用框架。框架优美之处在于封装常用布局和组件，开发者只需关注业务逻辑，推荐框架jQuery Mobile和Amaze UI。
  1.2，移动中间件。处于UI层和终端系统之间，封装各系统差异，提供统一的JavaScript接口，操作系统资源，如：文件系统、摄像头等，推荐PhoneGap。
  1.3，终端系统。处于整个应用的最底层，除非需要扩展PhoneGap接口，否则开发者可以不关心。
2，jQuery Mobile优缺点 
  2.1支持多平台。
  2.2布局自适应手机，平板电脑，pc。
  2.3结合PhoneGap，可生成跨平台移动客户端。
  2.4较丰富的组件支持。
  2.5比原生程旭运行慢。
3，jQuery Mobile特点
 3.1兼容主流手机浏览器，桌面浏览器。
 3.2体积小。
 3.3页面自动初始化，通过 data-role 属性自动对页面部件进行初始化.
 3.4触摸屏和鼠标事件支持。
 3.5使用Ajax加载页面，实现炫丽的页面切换效果.
 4像素知识
    px： css pixels 逻辑像素，浏览器使用的抽象单位
    em：相对于父元素的字体大小单位。
    
    dp, pt： 设备无关像素（物理像素）
    dpr(devicePixelRatio)： 设备像素缩放比（逻辑像素和物理像素的关系）
    计算公式：1px = (dpr)² * dp。
    PPI全称为Pixel Per Inch，每英寸像素取值，或称为像素密度，衡量单位物理面积内拥有像素值的情况。
    公式为 PPI=√（X²+Y²）/ Z 
    （  X：长度物理像素数；  Y：宽度物理像素数；Z：屏幕大小）
       rem：相对于根元素的字体大小单位。
       r.1:选择基准：虽然我们所写出的页面要在不同的屏幕大小设备上运行，
             但是写页面时必须要选择其中一种屏幕大小作为初始的基准， 
               而这个基准的选择应该根据视觉稿来决定。
       r.2:rem数值计算,将html的font-size设置成100px等固定值.
       r.3:动态设置html的font-size,随着屏幕大小的改变，html的font-size的值应该是基准rem*改变后的屏幕宽度 / 基准屏幕宽度。




 5，html5 Viewport：使开发出来的应用或页面大小能适合各种手机使用。
 Viewport总共有5个属性：
 width:控制viewport的大小，可以指定的一个值或者特殊的值。
 height:指定高度。
 initial-scale:页面初始缩放值。
 user-scalable:用户调整缩放。
 target-densitydpi：一个屏幕像素密度是由屏幕分辨率决定的，通常定义为每英寸点的数量（dpi）。