移动端布局其实可以归结为三个问题：
1、我们该以什么样的尺寸来构建页面、书写程序？
2、我们该如何适配不同的手机，使每个手机上呈现的效果尽可能接近？
3、我们应该用什么样的尺寸来设计页面，以期以最高的效率交付给程序员开发，并尽可能多地覆盖各种手机？
1、我们该以什么样的尺寸来构建页面、书写程序？
当我们拿到一款手机，准备写程序的时候，我如何才能知道我应该用多少像素宽，多少像素高，写一个div，才能写满整个屏幕？其实在手机被制造出来，这个尺寸就已经定好了。
我们知道屏幕是由很多发光的颗粒排列在一起组成的，不同屏幕的发光颗粒数量不同，有的发光颗粒多，有的颗粒少，这个颗粒在程序界叫做物理像素，看得见，摸得着。每个手机采用的屏幕不一样，物理像素也会不一样，通俗的讲就是普通屏、高清屏的区别。
物理像素
以前的PC屏幕，要21-27英寸宽度才能放得下1080个物理像素，因为物理像素很大，每一个物理像素对应一个虚拟像素完全没问题，看得很清楚，也很舒服，大小刚刚合适。这里的虚拟像素就是我们用来写网页元素大小和定位位置的单位像素。
后来手机屏幕厂商技术厉害了，一块手机宽度大小的屏幕上也能放得下1080个物理像素，物理像素变得非常微小。从iPhone 3GS到iPhone 4的对比可以发现，这个发光颗粒，也就是物理像素越来越小，人眼已经慢慢分辨不出来了。
物理像素
如果套用老办法，还是用一个物理像素来对应一个虚拟像素，你原来在PC上写12像素大小看上去很正常的的文字或者图形，在手机上会因为物理像素非常小，图形和文字看上去也会很小，文字跟蚂蚁一样，非常不适合阅读。
一个物理像素对应一个虚拟像素
针对这个问题，大家商议了一个解决办法。就是生产屏幕的厂商规定，我这块屏幕用两个物理像素宽表示一个虚拟像素宽，这样你的文字和图形看上去就大了一倍，不会不舒服了。关于视口的设置这里不详细讲解，可以参考文末的链接，查看具体的解决方法。
两个物理像素对应一个虚拟像素
这个比值，厂商规定它的名字叫做像素比，也就是我们所说的dpr，手机一出厂就设定好了，可能是1、2、3当中的某一个值，分别代表用几个物理像素来显示一个虚拟像素。
既然这种方法能够解决问题，那就规范化，做成公式，大家都来用。
公式中前两个参数由厂商规定，比方说Apple公司的iphone 6 ，它采用了一块物理像素750x1334的屏幕，规定像素比为2，从而计算出虚拟像素尺寸为375x667像素。我们开发人员只要按照375x667去开发程序、书写网页内容即可很好地适配苹果iphone6。
至此，我们已经知道我在开发的时候，该用什么尺寸去为一台手机写适合它的程序、网页或者内容了。
但是新的问题来了，不同手机厂商生产的手机的虚拟像素都不一样，有320x568、375x667、414x736等等，难道我要每个手机都去写一套程序适配他们吗？事实上不需要每个手机写一套程序，请看第二个问题。
2、我们该如何适配不同的手机，使每个手机上呈现的效果尽可能接近？
我们知道，不同手机全屏宽度下能容纳的像素不定，有320、375、414等，我们能不能通过一种方法，让我书写的程序或者网页能等比例缩小，使页面的宽度正好等于设备的宽度呢？当然是可以的，rem布局就是这样实现的。
rem的概念解释：rem是相对单位，是相对html根元素。举例来说：html的font-size是24px，那也可以说html的font-size大小是1rem，如果有一个box的尺寸48px，那么box的尺寸也可以说是2rem；
rem布局利用flexible.js动态获取屏幕宽度，使网页的html根元素的font-size大小为全屏宽度的十分之一，这个大小也叫1rem。网页中的元素宽和高，以html的font-size大小作为基准，宽或高是html 的font-size的多少倍，就是多少rem。
rem尺寸原理
rem尺寸原理
更通俗的解释，假设我是box盒子，不管你设备多宽，我盒子宽都是你设备宽度十分之一的倍数，这个倍数就是我的宽(像素)与html的font-size (像素) 的比值，不同手机上呈现的效果也就基本一致，达到适配目的。
利用rem布局，就不用每个不同型号的手机都去写一套程序适配，写一个大众认可的尺寸，然后去缩放页面就好了。只是在写页面的时候，里面元素的尺寸需要与html的font-size做比对，用rem来做单位书写，比对可以通过程序去实现，方法有多种，这里不细说。
像素比
到这一步，我们解决了用一个尺寸来适配不同的手机的问题，写出来的页面效果也基本一致。是不是我们可以随便拿一个主流尺寸去写程序，然后通过缩放去适配所有手机呢？不尽然，还有些小问题。
3、我们应该用什么样的尺寸来设计页面，以期以最高的效率交付给程序员进行开发，并尽可能多地覆盖各种手机？
用一个尺寸适配所有机型，理论上可以，但是会有一些问题，比方说图片模糊。先解释一个概念：倍图。如果我们把一张200x300的普通图片叫1倍图，长度和高度为400x600是1倍图的2倍的图片我们称为2倍图，尺寸为600x900的图片我们称之为3倍图。2倍图和3倍图是一个相对概念，都是以1倍图为基准，里面的内容一样，只是尺寸不同，其实都是普通图片。
图片为什么会模糊，其中的原理解释如下：
一个位图像素是栅格图像(如：png, jpg, gif等)最小的数据单元。每一个位图像素都包含着一些自身的显示信息(如：显示位置，颜色值，透明度等)。理论上，1个位图像素对应于1个物理像素，图片才能得到完美清晰的展示。对于高清屏而言（例如dpr=2的Retina屏幕），1个位图像素对应于4个物理像素，由于单个位图像素不可以再进一步分割，所以只能就近取色，导致图片看起来比较模糊，如下图。简单说，就是把一个像素再分割成四个接近的颜色块，这个算法计算出来的效果往往差强人意，看上去很模糊，这就是模糊的原因，不能一个位图像素对应一个物理像素，而是通过强行计算。
普通图片放到高清屏上的效果
如果普通屏幕下，也用了两倍图片，会怎样呢？
在普通屏幕下，200×300(CSS pixel)img标签，所对应的物理像素个数就是200×300个，而两倍图片的位图像素个数是200×300×4个，所以就出现一个物理像素点对应4个位图像素点，但它的取色也只能通过一定的算法取某一个位图像素点上的色值，这个过程叫做(downsampling)，肉眼看上去虽然图片不会模糊，但是会觉得图片缺少一些锐利度，或者是有点色差，如下图。
2倍图片放到普通屏幕上的效果
简单说，图片的放大和缩小的机制不一样，放大会让图片显示效果模糊，缩小虽然也会损失图片显示效果，但是要好于图片放大。因此，在手机上显示的图片，我们一般会设计一张大尺寸图片，比方说两倍图，在高清屏上，就一个物理像素对应一个位图像素，能很清晰的显示；而在普通屏上，一个物理像素对应一个downsampling之后的像素，效果也能令人接受。
除了将图片缩小这个办法外，对于图片模糊问题，比较好的方案就是用多倍图片(@2x)，原理是使位图像素与物理像素一一对应来实现。如：一个200×300(CSS pixel)的img标签，在普通屏幕上对应200x300个物理像素，能够很清晰的显示。在高清屏上（dpr=2的屏幕），同样的宽度，物理像素有400x600个，此时用400×600的图片，如此一来，位图像素点个数就是原来的4倍，位图像素点个数就可以跟物理像素点个数形成 1 : 1的比例，图片自然就清晰了。
以 iPhone 6 为例，我们在设计的时候，如果完全按照厂商给我们提供的虚拟像素尺寸，以375x667的尺寸来设计页面并输出图片，则输出的只能是1倍图，图像宽度最宽也就375像素。因为我们将1倍图强行拉大至2倍宽高，会导致图片模糊，所以想要2倍图适应高清屏时我们还需要单独再去设计，费时费力，不划算。
如果一开始就以750x1334的尺寸来设计页面，输出的图最宽能达到750像素宽，达到2倍图的要求，然后2倍图缩小一半，就可以输出1倍图，品质稍微有下降，但是影响不大，比较省事。
所以，我们在设计的时候，应该尽可能以厂商规定的虚拟像素的2倍或者3倍来设计页面，一次输出图片（2倍图和3倍图），节约时间成本。比方说 iPhone 6的设计稿，苹果公司给我们的虚拟像素是375x667，但是我们用750x1334的尺寸来设计，就可以一次劳动，多倍图输出。
总结一下：我们的开发过程是这样的，先查得主流设备的虚拟像素尺寸，现在主流的尺寸为 iPhone6/7/8 ，它们的虚拟像素尺寸为375x667，我们在设计的时候以这个尺寸的2倍来设计，就是750x1334，输出1倍图和2倍图，按是否是高清屏来分开加载里面的图片，防止图片模糊，其他的该怎么写还是怎么写，交由rem单位来达到等比适配。
参考链接：
http://www.cnblogs.com/xianyulaodi/p/5533201.html
网友评论