设备像素、设备独立像素、PPI、DPR、viewport，各种移动端布局的概念总是容易遗忘和混淆，这里推荐几篇博客和做一下记录备忘。

blog

设备像素，设备独立像素，CSS像素
meta viewport 你真的了解吗？
使用Flexible实现手淘H5页面的终端适配
可以通过前两篇文章了解一下基本概念，从第三篇文章借鉴一下手淘的布局解决方式。

概念

设备像素：又称物理像素，一个物理像素点。
设备独立像素：一个虚拟的像素，在前端中使用css像素来表示。
DPR：设备像素比，设备像素/设备独立像素，现在通常大于1

PPI：每英寸多少像素点，标准是160PPI，这个时候DPR=1，PPI超过300被Apple称为Retina视网膜屏幕。

viewport：视窗，视觉视口 visual viewport就是设备可见的部分，布局视口layout viewport就是浏览器布局所用的viewport。不同浏览器布局viewport不同，通常在手机中布局viewport大于视觉viewport。使用一个通用的禁止缩放的meta标签<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">布局viewport将和视觉viewport等大。所以一个320px的5s手机，其布局viewport为980px，缩小后，一个300px的宽的方块其实只占1/3左右。