像素及rem

一.像素知识

例子：iphone5分辨率640x1136(iphone5手机说640x1136指的是物理像素，实际是320x568px) 关于像素：

• 1.px:逻辑像素，浏览器使用的抽象单位

• 2.dp/pt:物理像素，

• 3.dpr:设备像素缩放比

• 4.关系：1px=(dpr)2*dp

因为iphone5dpr=2,所以iphone5在平面上1px=4dp;在宽或者高上1px=2dp,因此640x1136dp=320x568px

关于设备缩放比

• DPI：打印机每英寸可以喷的墨汁点

• PPI：屏幕每英寸像素数量，即单位英寸内的像素密度,ppi越高图像越清晰，可视度越低，默认缩放比越大， 根据计算公式：ppi=√11362+6402/4=326ppi 根据表格一下表格可知道iphone5默认缩放比为2，即dpr=2

                      ldpi      mdpi     hdpi     xhdpi
  复制代码

ppi 120 160 240 320 默认缩放比： 0.75 1.0 1.5 2.0

总结：根据屏幕物理像素和尺寸，可以计算ppi,对比表格可以知道默认缩放比，此值即为dpr,进而可以知道屏幕实际为多少逻辑像素。

二.关于rem使用

一般移动端设计稿为6401136,（px）,假设我们设置html的font-size为20px即1rem=20px;我们以iphone5为浏览设备为标准制作，那么我们在切图写页面的时候，rem和px这个关系是怎样处理的呢？（注：iphone5分辨率为320568px） 答：假定我们从设计稿上切一张480px的图，我们的rem计算过程为：

320/640=1/2； //应该设置的尺寸占设计稿尺寸多少比例
480*（1/2）/20=480/40=12rem
复制代码

总结公式：

设计稿任意尺寸px*（设备屏幕px/设计稿尺寸px）/(font-size)
复制代码