移动端适配方案系列教程(1)-css像素&&物理像素

前言：
一直以来都搞不懂移动端的适配问题，只能去使用淘宝出品的flexible移动端解决方案。但是由于没有真正搞懂原理，因此只是浅尝辄止。那么由一下几个问题展开。

1. 16px像素文本在pc端和移动端一样大小吗？
2. css：width:100px;height:100px;在pc端和移动端的显示有不同吗？
3. 100px100px位图在移动端设置css图片宽高为100px100px为什么模糊？
4. 移动端1px问题？

分析下，前两个问题属于一个css像素究竟有多大？我曾以为像素大小是固定的，结论是css像素的大小是不固定的。如果转不过弯来的小伙伴可以跟我过下几个概念(一遍没懂就多看几遍，或者看看别人的介绍，或许会恍然大悟)。

像素：组成数字图像的基本单元。
分辨率：狭义的理解为屏幕的像素。例如1200*780，可以理解为水平方向有1200的像素点，垂直方向有780个像素点。分辨率高的显示屏可以显示更多细节，反之则粗糙。
设备像素：又叫物理像素，不同的设备的物理像素大小也是不同的。
css像素：逻辑像素，也就是我们写代码时候的px。注意缩放会改变css像素大小
ppi：像素密度，即每英寸像素个数（因此物理像素大小==1/ppi），ppi的计算公式可以Google。
dpr：设备像素比。dpr=物理像素/css像素，如果dpr=2，意味着需要用2个物理像素填充一个css像素，因此css像素=dpr个物理像素大小。

由上文可以推算：1个css像素大小=dpr1个物理像素=dpr*(1/ppi)=dpr/ppi。运用这个公式，可以知道第1个和第2个答案*

第3个问题：由于移动端的dpr>1,因此会出现一个css像素有多个物理像素组成。100100的位图，只有在dpr=1的情况下，css也是100100才不会失真。在移动端，100100的位图覆盖的物理像素>100100的物理像素，因此电脑会采取邻位采色，导致模糊。

第4个问题：1px准确来说，在pc端是比移动端粗的(但是只有1点点)。但是之所以会有1像素问题，主要不是和pc端比较，而是和移动端设计稿比较。移动端设计稿以iphone6距离，设计稿的宽是750px(dpr=2),设计稿上1px其实就是1个设备像素的大小，而1px在移动端是由2个设备像素填充，因此会大了2倍。至于解决方案，可Google。

推荐文章：
[为什么同样大小的像素在移动端和pc端看起来不一样]
(https://www.jianshu.com/p/4583755b4f69)
前端移动端适配总结，文章有关于位图的介绍

下一篇：移动端适配方案系列教程(2)-移动端适配基础知识