首先我们了解下为什么要有自适应布局，多屏幕适配，这就得从前端界面的开发流程说起了。
前端界面开发流程：
一般来说，前端的界面开发，都要参考UI（User Interface 用户界面）给我们的设计图，也叫视觉稿，或者直接用Axure画个原型给你，有可能是高保真的（几乎和真实的界面一样），也可能是低保真（只有布局的勾勒），以上我们都可以认为是视觉稿。问题来了，我们开发的界面要运行在各种不同屏幕大小，分辨率大小的设备上，而视觉稿一般只有一份（估计设计一份给你就累得够呛），那怎么保证一份视觉稿，一种分辨率的视图适用于各种不同分辨率的设备呢，难道我们前端要开发多份网页文档去做适配吗？那绝对累死的。
多分辨率屏幕适配：
嗯，接下来就引入多屏幕适配问题了。在此之前我们得先了解几专业名词。
物理像素（physical pixel）：
屏幕上的图像就是由不同颜色的像素点组成并呈现的，而这像素点就是物理像素，它是一种物理概念，是屏幕上最小的物理显示单元。
分辨率（resolution）：
一款设备屏幕上横竖方向的物理像素点个数便是分辨率了，如iphone3水平方向的像素点个数是320个，垂直方向480个，那么它的分辨率就是 320x480。分辨率也是种物理概念，随着设备生产下来就已经确定好了，不可改变。
嗯，说到这，假如我们的UI是按照iphone3的分辨率设计的视觉稿，也就是分辨率为320x480，而视觉稿中有个正方形宽高分别是160px，240px，那么它在iphone3中刚好大小占了屏幕的四分之一。但我们的页面还要展示在iphone4（640x 960）上呢，那就变形了，不是占四分之一了。可不但要展示在iphone4上，iphone6甚至iphoneN呢，可见多屏幕适配（适配不同的分辨率）方案就非常重要了。iphone就最先提出一套方案来解决多屏幕适配问题，一种相对单位：
逻辑像素（logic pixel）：
也叫虚拟像素，它是一种相对单位，相对于实际的物理像素，我们的开发中使用的单位将会是逻辑像素，不是物理像素。而iphone中逻辑像素是以iphone3的分辨率为基础（320x480）。也就是说，在iphone3中，1px的逻辑像素等1px的物理像素。但到了iphone4（640x960）中，它会变成1px逻辑像素用2px物理像素来表示了，这样的话，iphone3中元素的的大小（160px，240px）到iphone4（160x2px，240x2px）中展示的大小是不是也一样了。盗图：
而这个逻辑像素和物理像素的比值就是：
设备像素比（device pixel ratio）dpr：
iPhone的逻辑像素是320px，那iphone3的dpr是1，iphone4就是2，iphone5也是2。如此推理的话就可以认为iphone手机的屏幕有固定的逻辑像素（320px），这样的话，我们就只需要一份视觉稿，一份网页文档，让dpr去自动帮我们在不同分辨率的屏幕上做元素大小自适应就行了，什么都不用去管。爽！。
可现实却打脸了，因为iphone6后，逻辑像素都变了，不再是320px。之后的7，8，9，x都是375px，至于为什么，我真不清楚，逻辑像素一直是320px，物理像素变多，dpr变大不就行，为什么连逻辑像素都变了。郁闷，这样的话，我们就又得考虑不同的逻辑像素问题了。
我这里一直在说iphone系列，其实android也出了一套和iphone一样的措施，只是名字不同而已。简单介绍一下：
设备独立像素（device independent pixel）dip：
嗯，所谓的dip，其实就是逻辑像素哈，只不过android的逻辑像素更是多变。
那么pc端呢，pc逻辑像素和物理像素大都是一比一关系的。它也有个新名称：
CSS像素（CSS pixel）：
这样说的话，其实逻辑像素，虚拟像素，设备独立像素，CSS像素都是一类东西哈，只不过开发之中我们用的px单位一般称为CSS像素，而iphone中又称为逻辑像素，当然android中就又称为设备独立像素了。程序界就是喜欢起名字哈，好像换了个名称就成为自己的东西了，瞬间高大上。
让我们回到刚才的问题，逻辑像素也在变该怎么办，这样我们就又出了一套解决方案：
自适应布局：
主要的原理是：UI的视觉稿是基于某屏幕的分辨率进行设计，然后用逻辑像素除与视觉稿的物理像素，如320px/640得到缩放比0.5，接下来视觉稿中的所有元素都是以该缩放比作为乘法因子，如视觉稿中的正方形200px，在当前设备分辨率下合适的大小是，200x0.5=100px。这样就可以实现一份视觉稿，一份网页文档，在多种不同逻辑像素设备下的大小自适应了。当然实际的操作会有很多细节上的问题，目前市面上比较流行的就是手淘的解决方案，大家可以先看看，使用Flexible实现手淘H5页面的终端适配，我模仿它也写了一份简化版的，有空再贴出来吧。
还有几个相关的关键词，我顺便讲下：
每英寸物理像素个数（Pixels Per Inch）PPI：
这个单位主要是评价的屏幕细腻度的，并不是分辨率越高的屏幕越好，因为有时屏幕太大，分辨率高，显示质量任然不好，而是单位面积像素个数越多的屏幕显示的图像才越高清。对了，这有时也叫每英寸设备像素（device pixel inch）dpi。是不是和dip（device independent pixel）长得差不，晕。
先讲到这儿吧，缺了什么再补充。
参考：
