CSS 像素相关
基本概念
DPI,PPI,DP
iphone6参数(PPI:326,尺寸比率:16:9,尺寸:4.7in)
iphone6 PPI，物理像素 计算公式:
x =Math.sqrt(Math.pow(4.7,2)/(Math.pow(9,2)+ Math.pow(16,2)))
x = 0.25602531403033635
宽度＝9*x＝2.304227826273027
宽度＊PPI＝751.1782713650068。近似iphone6 750的物理像素。
设备像素
设备像素一般就是厂商们宣传的分辨率像素。例如，iphone6 1334*750.这个像素是设备真实的像素点（像素处理单元，能处理颜色值）
设备无关像素
设备无关像素顾名思义就是这个像素是虚拟的，和设备真实的像素不是对应的。例如，CSS规范中定义的CSS pixel，就是设备无关像素。设备无关像素抽象了像素的概念，方便我们在不同分辨率的设备上面达成一致的外观。
设备像素比率
设备像素比率＝物理像素/设备无关像素
iphone6: 750/325 = 2
iphone6 Plus: = 1242/414 = 3
多分辨率布局
手机app开发中，目标设备特别多。设计师一般针对iphone 6的分辨率(750*1334)标准进行设计。可以利用REM这个单位进行布局。
REM是相对单位，相对HTML的font-size 大小。例如设置font-size=75.那么整个设计图就分为10份。
<html style="font-size:37.5px">
<meta name="viewport" content="width=device-width"/>
<body style="margin:0;">
<div style="width:5rem;height:1rem;background:red;float:left"></div>
<div style="width:5rem;height:1rem;background:green;float:right"></div>
<script>
var unit = window.innerWidth/10;
document.documentElement.style.fontSize = unit+'px';
</script>
</body>
</html>
这种方式，页面的布局会根据屏幕分辨率进行自动适配。
