rem自适应移动端布局

现在的移动终端（手机，pad）屏幕大小各不一样，为了适应每一种屏幕宽度而设计多款样式明显是不科学的，所以就有了自适应布局的概念。

以前，实现自适应布局的时候，我使用了CSS3 @media 监测视口宽度，根据不同宽度实现不同的布局，从而实现一套CSS适配所有终端（PC，移动）。虽说听起来很方便，但实际上也是在尽量重用的前提下针对屏幕宽度调整部分样式而已，那有什么方法可以更简单地去适配移动端呢？rem布局给了我一个新的思路。

rem是一个相对长度单位，跟em类似，不过rem参照的是页面根元素，em参照的是当前父元素。rem布局的思路其实很简单，在编写样式的时候，在需要实现自适应的长度属性使用rem单位，然后，使用js监测屏幕的宽度，在根元素（html）上设置font-size（px绝对值），这样，用了rem长度单位的属性就会根据这个设定值变动，实现自适应。

实现起来非常简单，但原理却关系到很多方面的东西，以某宝移动端网页为例子，我用chrome开发工具得到了一些数据：

终端	屏幕宽度	dpr	初始scale	html font-size	元素line-height	元素font-size
水果6p	414	3	0.333333	124.2px	0.688rem(85px)	36px
水果6	375	2	0.5	75px	0.688rem(51.3px)	24px
水果5	320	2	0.5	64px	0.688rem(44px)	24px

上面分别是三款水果手机上某宝网页的数据，其中挑选了某个页面自适应元素，记录了它的行高（括号中是实际高度），和字体大小。

在分析数据之前，我们先了解一下dpr是什么东西：

我们都知道像素，设备上能显示的像素数量称为物理像素，每台设备的物理像素都是固定的；而我们在开发页面的时候使用的像素称为设备独立像素（dips），是人为设定的。然后就有这么一个公式：dpr=物理像素/dips （单个方向上）

以前显示技术不发达的时候，设备屏幕有多大，能显示多少像素，那开发者就做多少像素的网页，比例为1：1，那dpr就是1。后来水果推出了一款屏幕，可以在同样大小的屏幕上显示多一倍的像素（单个方向上），也就是说设备像素*2，dpr=2，dpr为2的屏幕在放大一倍后依然能保持原来的清晰度，为了适应这种屏幕，网页开发人员就必须设计比以前高宽大一倍的网页，然后在初始显示的时候缩小一倍，以适应用户的放大操作。（dpr为3同理）

理解了dpr后应该就有点眉目了，我们以水果6为基础，这个终端的dpr是2，那么UI设计师先做出一份宽度为375*2=750px的设计稿，前端按照750px宽度进行重构，设定某元素的font-size为24px，行高为51.3px。那么我们为了实现rem布局，要给这个页面的根元素设定一个font-size初始值，某宝设定为75px（设定为100px是最简单的，那么24px就等于0.24rem了，但别的屏幕依然不好算，算），那这个元素的line-height就是：51.3/75=0.684，约等于0.688（因为数据都没有精确，所以会算不准），按照这个方法给整个页面需要自适应的地方去设置，因为设计稿是放大一倍的，所以最后还要在viewport上面设置scale为0.5。（要注意的一点是某宝没有用rem给元素设置font-size，它是根据dpr设置的固定值，目的是把字体大小定义到12独立像素）

那么我们的初始页面已经OK了，接下来可以根据上面的规则来计算别的终端。

我们来看一下水果5的设置，换了个终端，dpr没变，变的只是屏幕的宽度，那么为了实现rem自适应，等比缩放，屏幕宽度缩小了一定比例，html font-size也要缩小一定比例，那么就有：375/75=320/64=5，也就是说水果5的html font-size应该设置为64px，那么刚才那个元素的行高就变成了64*0.688=44（跟表上一样）。

来看看水果6p，这里dpr变了，也就是说设备像素变成了三倍，所以我们的scale也要变成0.3333，设计稿也要变成原来的3倍，与dpr为2的情况对比的话就是1.5倍。那么html font-size就要设置为375/75=(414*1.5)/fs，fs=124.2，初始scale=1/3=0.33333，元素font-size=24*1.5=36。

其他的屏幕也以此类推就好。

PS：rem布局是以动态改变长度来进行页面自适应，只能处理简单的页面缩放，假如想要实现PC移动端通用的动态布局的话还是需要使用CSS3的@media来进行详细的布局。