移动web开发（一）设备像素，设备独立像素，css像素

看了好久，也不是十分懂，特写此文章记录一下心路历程

参考文章：这三篇文章都图文并茂，容易理解。

此像素非彼像素（翻译版）：https://www.w3cplus.com/css/A-pixel-is-not-a-pixel-is-not-a-pixel.html

移动高清，多屏幕适配方案：http://www.html-js.com/article/Mobile-terminal-H5-mobile-terminal-HD-multi-screen-adaptation-scheme%203041

深入理解viewport和px：http://tgideas.qq.com/webplat/info/news_version3/804/7104/7106/m5723/201509/376281.shtml
移动前端开发之viewport：http://www.cnblogs.com/wuqun/p/6535262.html

一.概念

1.设备像素（实际分辨率）：物理概念，就是操作系统能控制的最小光点。

2.设备独立像素：逻辑概念，可以认为是计算机坐标系统中得一个点，代表一个可以由程序使用的虚拟像素(比如: css像素)，和设备像素存在一定的对应关系

3.设备像素比：就是以上两者的比值，代表一个逻辑像素在x轴或y轴上代表几个物理像素

以我们的手机为例，1920*1080这是设备像素，640*360是设备独立像素，1920/640=1080/360=3是设备像素比，即1个设备独立像素=9个设备像素范围大小

现在，你可能知道了设备像素，设备独立像素是什么东西。在这里我的理解是把分辨率和设备独立像素理解为值，即手机属性值（1920*1080，和640*360）而把分设备像素和css像素理解为单位。

二.开发遇到的问题

作为开发者，你直面的就是css像素，而绝对不是设备像素（分辨率）。因为对于设备独立像素同为480*320的两台手机，他的分辨率（设备像素）分别为480*320或960*640。（试想开发者用设备像素为单位，那么他在两台手机上的大小表现就是2倍的差距）。因此可以得出结论，css像素是抽象在设备像素之上的，供开发者使用的逻辑像素

知道了css像素是个什么东东，你可能会问：

（1）我在设计稿中看到的都是640px，这个px是css像素么？

不是，这个是位图像素。简单来，在电脑屏幕中1px（css像素）？=1位图像素=1设备像素。

（2）为什么要在其中间加个？号呢？

因为位图像素和设备像素是一直相等的，但是css像素和位图像素，设备像素却不是。比如在手机中，1px(css像素)可能=2*2个位图像素或设备像素，这也是我们设计稿是640px而不是直接对应手机的320px的原因。因为设计师不想图片在dpr=2的屏幕上看起来虚，又不想前端工程师麻烦，所以会用640px。

（3）你可能还会问，为什么会看起来模糊？

拿分辨率960*640，设备独立像素480*320的手机来说，dpr=960/480=2,即1px（css像素）=2*2设备像素，如果我的设计稿是320px宽，由于图片不够设备像素的值。他的处理方式是将位图像素定位到像素值*dpr的位置，也就是对应一个设备像素，但是却没填满1个css像素，之后他会就近取值，填满，因此会看起来模糊。而设计稿是640px的话，就刚好和设备像素对应上了，则看上去是清晰的。

（4）问题又来了，那640px的设计稿在480*320分辨率的手机上，看起来会如何？

有人会想，位图像素多出了设备像素，怎么处理的？答案是通过一定的算法使图片看起来不会模糊，只会减少一点锐利度，这是可以接受的

（5）设计稿为何是640px我懂了，但是我们手机通常是可以放大或缩小的啊，放大变模糊有时怎么一回事？

首先要想到，手机中，在你放大缩小操作的时候，什么没变？

1）分辨率（在你的手机中，你的分辨率是多大就是多大）

2）设备独立像素不变（前面提到把他理解为一个属性值，手机宽和高是固定的，所以不变。ps：我的理解可能是错的，但这是能让我记住正确结论的办法）

3）开发者设定的长度没变（我开始设定的width=20px，在放大缩小后还是这个值）

因此，我们就知道是什么变了。是1px所代表的设备像素。具体请重看（3）（4）中的解释

为何说要把设备独立像素理解为值呢？首先，引入两个js中的值

1）screen.width:代表设备独立像素

2）window.innerWidth:代表的是视窗宽度（包含滚动条）

以上两个js值，都可以在浏览器的手机模式中进行放大缩小，换设备测试

<---------------------------------下面还没理清------------------------------------------------------>

发现一个有趣的现象

(1)screen.width在不同设备中始终等于设备的设备独立像素（不变）。放大缩小时没有变化（显然在放大缩小时视觉变化跟他没关系）

(2)window.innerWidth在不同设备初始值大多是980px，在放大时值变小，在缩小时值变大

可以肯定放大缩小和这个视窗宽度有着密切的关系。

到现在，你可能会对