移动web开发入门—基础知识、自适应布局、调试

之前没做过移动端web开发，最近接手的一个小项目是做微信公众号，需要考虑手机适配。UI给出的设计稿是一般是基于iphone手机做的（15年之后是基于ipone6），我们的UI是基于iphone6来做的（iphone6手机的分辨率是1334 * 750）。开发过程中主要有几个疑问：
1、如何将设计稿的尺寸转换到开发尺寸？
2、如何实现自适应？
3、如何调试在手机中的展示效果
下面会针对这几个问题展开讲解。讲解之前，要先讲下移动端开发的基础知识。

一、基础知识

1、屏幕尺寸

即我们通常说的尺寸是多少多少英寸啦，指的是屏幕对角线的长度。比如iphone6的屏幕尺寸是4.7英寸

px，pixel，像素，电子屏幕上组成一幅图画或image的基本单元。
pt， point，点，印刷行业常用单位，等于1/72英寸。
ppi，pixel per inch，每英寸像素数，值越高，屏幕越细腻。
dpi， dot per inch，每英寸多少点，该值越高，则图片越细腻。
dp，dip， Density-independent pixel，安卓开发用的长度单位。以160ppi为标准，和iPhone的scale差不多的意思。安卓用dp适配，系统会自动将dp转换为px。当屏幕像素点密度为160ppi时，1dp=1px。

2、屏幕分辨率
屏幕上的像素总数。常用的表现形式如：1280x720, 1920x1080等。这个像素指的是物理像素
3、pt和px

pt：pixel，像素，电子屏幕上组成一幅图画或image的基本单元。
pt：point，点，印刷行业常用单位，等于1/72英寸。
但是你想知道的pt可能并不是指这里的pt，而是IOS系统的pt，请往下看
4、 ios pt 和 px
1）px：像素，电子屏幕上组成一幅图画或image的基本单元。
2）pt
iOS 开发中用到的单位 pt 是独立像素的意思。和安卓中的单位dp本质上是一个概念。

它是绝对长度，不随屏幕像素密度变化而变化（和我们日常用到的毫米、厘米是一个意思，只是它要小得多）。
在非视网膜的 iPhone 上（iPhone 3G），苹果规定 1px=1pt，也就是说 pt 和像素点是一一对应的。但随着 iPhone 4 的到来，高分屏出现了（视网膜屏），这个时候 1pt 对应 2px。

出现了所以用固定长度 pt 作为开发单位的好处是：这样可以统一图形在同一种类不同型号设备上图形的大小。而如果用像素作为单位的话，就乱了套了，因为在不同像素密度的屏幕里面，像素本身大小是不一样的。

5、PPI和DPI

1）PPI

设备像素密度(pixel per inch)，一般手机参数中会给出ppi的值。表示每英寸像素数，值越高，屏幕越细腻。在购买手机时，ppi的值是用户关注的数据。

比如iphone 6的分辨率是1334 * 750，那PPI = (1334 ^ 2 + 750 ^ 2) ^ 1/2

通常把超过300ppi的显示屏成为retina屏。当一个显示屏像素密度超过300ppi时，人眼就无法区分出单独的像素。这也是讲：显示设备清晰度已达到人视网膜可分辨像素的极限。因此手持平板类电器显示器的像素密度达到或高于300ppi就不会再出现颗粒感。

另外观视距离及显示器尺寸的大小或许可改变上述像素密度超过300ppi的定义，因为人的观视距离在2米开外显示器像素密度只要超过200ppi也无法区分出单独的像素。
2）DPI

DPI（Dots Per Inch）最初用于衡量打印无上每英寸的点数密度，就是说你的打印机可以在一英寸内打多少个点。DPI值越小，图片越不惊喜。
当DPI的概念用在计算机屏幕上时候，和PPI是一样的。一般在IOS和Android中提到的DPI和PPI指的是同一个值

2、物理像素、设备独立像素、设备像素比

1）物理像素(physical pixel)
一个物理像素是显示器(手机屏幕)上最小的物理显示单元，在操作系统的调度下，每一个设备像素都有自己的颜色值和亮度值。屏幕分辨率指的就是物理像素。

2）设备独立像素(density-independent pixel)
设备独立像素(也叫密度无关像素、逻辑分辨率)，可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素(比如: css像素)，然后由相关系统转换为物理像素。
设备独立像素就是对应前端在开发时使用的像素单位。
所以说，物理像素和设备独立像素之间存在着一定的对应关系，这就是接下来要说的设备像素比。

3）设备像素比(device pixel ratio )
设备像素比(简称dpr，也叫倍率)定义了物理像素和设备独立像素的对应关系，它的值可以按如下的公式的得到：

设备像素比 = 物理像素 / 设备独立像素 // 在某一方向上，x方向或者y方向

在javascript中，可以通过window.devicePixelRatio获取到当前设备的dpr。
在css中，可以通过-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio进行媒体查询，对不同dpr的设备，做一些样式适配(这里只针对webkit内核的浏览器和we