手淘flexible适配终端方案（一）

 

最近刚接了公司的一个新项目，其中终端适配方案是用的淘宝团队开源的Flexible方案，第一次使用，收获良多，做一下总结。

一、Flexible适配思路

  flexible是淘宝团队开源的一种终端适配方案。核心思路是检测设备的DPR和屏幕宽度，动态修改根标签html的font-size样式的大小，用rem单位来做适配。最后这句话怎么理解呢？flexible的做法是将设计稿分为10份，每一份就是设计稿宽度的百分之十。我们知道，UI一般会选择一款设备作为设计基准。现在标准用的比较多的是ipone6。ipone6的屏幕宽度是375，dpr是2，为了适配retina屏，所以设计稿的宽度一般为750px。那么将750px分为10份，也就是10rem，750/10也就是75px;1rem=75px。那么我们在编码的时候，比如一图片在设计稿上的尺寸为100px，那么它的长度就应该为100/75rem。详细的思路分析，我会再写一篇flexible的源码分析。

二、设备像素比(device pixel ratio )

  为了更好的理解，首先先介绍一下几个重要的概念，先知道设备像素比是怎么计算的（dpr）。

物理像素(physical pixel)

  显示器(手机屏幕)上最小的物理显示单元

设备独立像素(density-independent pixel)

  设备独立像素(也叫密度无关像素)，可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素(比如: css像素)，然后由相关系统转换为物理像素。 所以说，物理像素和设备独立像素之间存在着一定的对应关系，这就是接下来要说的设备像素比。

设备像素比(device pixel ratio ) 

设备像素比 = 物理像素 / 设备独立像素 // 在某一方向上，x方向或者y方向 。为什么要分为两个方向呢，看下了下面的图就知道了。

像素看做是一个平面，面的大小由宽高算出，如果只考虑一个方向，那么它只会是一条线。言归正传，如上图 宽高都为1px作为物理尺寸的长度都是一样的，但是里面对应的物理像素不同。一个宽高为1px的CSS像素的普通屏里面包含1个物理像素，而dpr为2的retina屏则有四个。为什么是4个呢？上面说到dpr是在某一方向上，x方向或者y方向，物理像素/设备独立像素（css像素）的比。宽和高都是X2的所以才是4倍，设计稿才会是375x667和750×1334。

为什么要说这一部分呢，在使用手淘flexible的方案的时候，我们选择图片是需要使用一倍图、二倍图或者三倍图，最好是根据设备来切换，不然可能会出现图片模糊状态很明显的情况。为什么会出现图片模糊的情况呢？这里涉及到另外一个概念

位图像素

一个位图像素是栅格图像(如：png, jpg, gif等)最小的数据单元。每一个位图像素都包含着一些图像物理信息(如：显示位置，颜色值，透明度等)。

理论上，1个位图像素对应于1个物理像素，图片才能得到完美清晰的展示。在普通屏幕下是没有问题的，但是在retina屏幕下就会出现位图像素点不够，从而导致图片模糊的情况。一张图来表示：

由于单个位图像素不可以再进一步分割，所以只能就近取色，从而导致图片模糊(注意上述的几个颜色值)。 
所以，对于图片高清问题，比较好的方案就是两倍图片(@2x)。如：200×300(css pixel)img标签，就需要提供400×600的图片。如此一来，位图像素点个数就是原来的4倍，在retina屏幕下，位图像素点个数就可以跟物理像素点个数形成 1 : 1的比例，图片自然就清晰了(这也解释了为啥视觉稿的画布大小要×2)。

这里就还有另一个问题，如果普通屏幕下，也用了两倍图片，会怎样呢？ 
很明显，在普通屏幕下，200×300(css pixel)img标签，所对应的物理像素个数就是200×300个，而两倍图片的位图像素个数则是200×300*4，所以就出现一个物理像素点对应4个位图像素点，所以它的取色也只能通过一定的算法(显示结果就是一张只有原图像素总数四分之一，我们称这个过程叫做downsampling)，肉眼看上去虽然图片不会模糊，但是会觉得图片缺少一些锐利度，或者是有点色差(但还是可以接受的)。当然有些做法是根据dpr向服务器请求不同分辨率的图片，不然把大量图片全放在应用中的话，你的应用会变得很大。

为什么要用那么多得笔墨介绍设备像素比呢，因为手淘的flexible方案是为了不同的终端做的适配，但是这仅仅是页面比列的适配。在不同dpr的设备上布置应用，还需要解决dpr不同所带来的其他问题。

参考文章：http://www.cnblogs.com/jingwhale/p/5741567.html