像素的那些事儿

自从去年接触移动端页面开发,跟像素相关几个名词就像幽灵一样挥着不去，看了很多文章，始终不敢说真正理解了，每次碰移动端页面开发都心虚，整理一下，没事看看。

概念

逻辑像素：又称css像素，viewport中的一个小方格，css样式代码中使用的就是逻辑像素，一个抽象概念，并不存在

设备独立像素：与设备无关的逻辑像素，代表可以通过程序控制使用的虚拟像素，是一个总的概念 （ 看到这个名词就默认是逻辑像素就行）

物理像素：又称设备像素，显示器（手机屏幕）上最小的物理显示单元，常说的1080x1920像素分辨率就是用的设备像素单位

ppi(pixel per inch):表示每英寸所包含的像素点数目，数值越高，说明屏幕能以更高密度显示图像

dpr(device pixel ratio):设备像素比，代表设备独立像素到设备像素的转换关系，在JS中可以通过window.devicePixelRatio获取 。
dpr = 设备像素/设备独立像素

关系

PC端 - - 1个逻辑像素 = 1个物理像素（在100%，未缩放的情况下，如果缩放到200%，可以说一个逻辑像素 = 2个物理像素）

移动端 - - 移动端根据设备不同有很大差异，根据ppi或dpr可以得到不同的换算关系

用途

这些都是基础概念，是必须要理清的，明白了这些，要面对一个问题- 移动端适配。要真正做好移动端适配其实是件很麻烦的事情，因为android有着五花八门的机型，iphone又有大小屏。之前做过一个移动端项目是采用手淘H5页面的终端适配解决方案，基本思路是：
1、采用iphone6(dpr=2)作为设计和开发基准
2、定义一套适配规则，自动适配剩下的N种设备尺寸
--这套规则就是一套js代码，执行这个JS后，会在元素上增加一个data-dpr属性，以及一个font-size样式。JS会根据不同的设备添加不同的data-dpr值，比如说2或者3，同时会给html加上对应的font-size的值，比如说75px。如此一来，页面中的元素，都可以通过rem单位来设置。他们会根据html元素的font-size值做相应的计算，从而实现屏幕的适配效果。
-- 实际开发中，字体尺寸是根据上述data-dpr属性值来确定的，我们用sass写了一个全局mixin供其他页面使用

@mixin font-dpr($font-size){
  font-size: $font-size;
  [data-dpr="2"] & { font-size: $font-size * 2; }
  [data-dpr="3"] & { font-size: $font-size * 3; }
}

rem的尺寸计算：手淘将视觉稿宽度分为100份（主要是为了兼容vh和vw,尺寸单位，有兴趣的可以了解一下）,每10份 = 1rem，代码实现：用sass写一个函数，全局使用

/**
* $px 逻辑像素值
* $base-font-size  rem基准值(计算方式类似于vw) html的font-size值： deviceWidth/100 *10
*/
@function px2em($px, $base-font-size: 124.2px) {
 @return ($px / $base-font-size) * 1rem;
}

--这套规则只对iOS设备进行dpr的判断，对于Android系列，始终认为其dpr为1。所以无法完全适配繁杂的Android系列

3、特殊适配效果给出设计效果（这个没做过，技术上应该是采用媒体查询根据特例写特定样式）

移动端适配的东西很多，感兴趣的可以看一下参考文章，里面详细介绍了手淘的适配方案。

前进的路上有太多的变数，处变不惊，一步一个脚印才是真理，不断学习，不断进步。

参考文章：
CSS像素、设备独立像素、设备像素之间关系
使用Flexible实现手淘H5页面的终端适配