前言：一直以来都搞不懂移动端的适配问题，只能去使用淘宝出品的flexible移动端解决方案。但是由于没有真正搞懂原理，因此只是浅尝辄止。那么由以下几个问题展开。
- 16px像素文本在pc端和移动端一样大小吗？
- css：width:100px;height:100px;在pc端和移动端的显示有不同吗？
- 100px100px位图在移动端设置css图片宽高为100px100px为什么模糊？
- 移动端1px问题？
分析下，前两个问题属于一个css像素究竟有多大？我曾以为像素大小是固定的，结论是css像素的大小是不固定的。如果转不过弯来的小伙伴可以跟我过下几个概念(一遍没懂就多看几遍，或者看看别人的介绍，或许会恍然大悟)。
像素：组成数字图像的基本单元。
分辨率：狭义的理解为屏幕的像素。例如1200*780，可以理解为水平方向有1200的像素点，垂直方向有780个像素点。分辨率高的显示屏可以显示更多细节，反之则粗糙。
设备像素：又叫物理像素，不同的设备的物理像素大小也是不同的。
css像素：逻辑像素，也就是我们写代码时候的px。注意缩放会改变css像素大小
ppi：像素密度，即每英寸(in)像素个数（因此物理像素大小==1/ppi），ppi的计算公式可以Google。
dpr：设备像素比。dpr=物理像素/css像素(一个方向上)，如果dpr=2，意味着需要用2个物理像素填充一个css像素(面积上需要4个)，因此一个css像素=dpr个物理像素。
由上文可以推算：1个css像素=dpr*1个物理像素=dpr*(1/ppi)=dpr/ppi。运用这个公式（并且在理想视口中），可以知道第1个和第2个答案
第3个问题：由于移动端的dpr>1,因此会出现一个css像素有多个物理像素组成。100100的位图，只有在dpr=1的情况下，css也是100100才不会失真。在移动端，100100的位图覆盖的物理像素>100100的物理像素，因此电脑会采取邻位采色，导致模糊。
第4个问题：之所以会有1像素问题，主要不是和pc端比较，而是和移动端设计稿比较。移动端设计稿以iphone6举例，设计稿的宽是750px(dpr=1),而移动端宽是375px(dpr=2).所以设计稿上1px其实就是0.5个css像素(1个设备像素)，而1px在移动端是由2个设备像素填充，因此会大了2倍。至于解决方案，可Google。
推荐文章： [为什么同样大小的像素在移动端和pc端看起来不一样] (www.jianshu.com/p/4583755b4…) 前端移动端适配总结，文章有关于位图的介绍
下一篇：移动端适配方案系列教程(2)-移动端适配基础知识
