学习笔记：自适应布局，多屏幕适配

首先咱们了解下为何要有自适应布局，多屏幕适配，这就得从前端界面的开发流程提及了。

前端界面开发流程：

通常来讲，前端的界面开发，都要参考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）长得差不，晕。

先讲到这儿吧，缺了什么再补充。

参考：

• 移动端高清、多屏适配方案
  
• 前端：移动开发 - 像素、viewport
  
• 移动端webapp开发必备知识
  
• 移动端H5解惑-概念术语（一）