适配篇-爱上自适应（最简单的解决方案）

相信很多准备开始写移动端页面的同学都会头痛一个问题——如何做页面的自适应？

当然解决方案很多，比如：流式布局，弹性布局也都能获得不错的效果，小编也会在后期陆续去整理这些方案，但是今天主要介绍的是本人在实践中用的最顺手最简单的布局方案——rem（什么是rem）布局。

 

什么是rem？

rem是个低调的css单位，手淘在移动端的布局是基于rem处理的，当然还要基于viewport的处理，这里暂且不表。rem和em单位一样，都是一个相对单位,不同的是em是相对于元素的父元素的font-size进行计算,rem是相对于根元素html的font-size进行计算,这样一来rem就绕开了复杂的层级关系，实现了类似于em单位的功能。默认情况下浏览器给的字体大小是16px，按照转化关系 16px = 1rem。

 

了解了rem，下面我正式介绍rem的布局方案：

rem布局非常简单，其基本原理就是根据不同的分辨率,动态的修正根字体的大小,让所有的用rem单位的子元素跟着一起缩放,从而达到自适应的效果。

但是如何做到呢，我相信绝大多数的前端的jser来说这并不是难事，小编曾拿jq写过一段，用起来也是得心应手，不过后来在网上发现了一段原生js代码，写的更为简洁，所以这里就把网友的这段代码贴出来，供大家参考：

 

(function (doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            docEl.style.fontSize = 100 * (clientWidth / 375) + 'px';
        };

    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

 

 

这段代码的意思不难理解，获取页面的宽度，然后换算出当前页面的根字体大小。

当然，看到这里可能有很多童鞋有些不理解了，为什么设置375px，为什么设置根字体是100px？

别急，我来给大家详细说明：

首先说下设置为375px的原因。大家知道，iphone5分辨率为640*1136，iphone6的分辨率是750*1334，iphone6 Plus的分辨率是1080*1920，需要注意的是，我这里说的分辨率是物理分辨率，而我们项目里使用的是css的逻辑像素，简单理解起来就是物理像素的一半就是逻辑像素，由此可见我这里设置的尺寸标准是iphone6（750/2=375）的。

那问题又来了，为什么设置的是iphone6 的，而不是其他尺寸的？

是这样的，我首先要说明的是，这个375px不是必须的，是可以变化的。我在这里设置成375的原因有两方面，第一是因为我们设计师出的ui图尺寸规格是iphone6 为基准的，第二是设置在375这个标准上，方便向上向下缩放时，展示效果最佳。总结来说，根据你所在公司的具体情况灵活设置。

再有根字体设置成100px的原因。上面在解释rem的时候我有提到，如果根字体16px，那么1rem=16px，那50px又是多少rem呢，这就要去换算了，显然这样会很麻烦。如果根字体是100px，50px就是0.5rem，这样就省去了换算的麻烦。

 

说到这里，解决方案已经讲完了，是不是很简单。下面我给大家再举个简单的例子：

1）首先我将这段代码，专门封在一个js里，起名为adapter.js引入页面（项目中每个页面都要引用）；

<script src="js/adapter.js"></script>

2）我们写一个测试用的button按钮

<button type="button">我是测试按钮</button>

3）设置样式如下：

button{width: 2rem;height: 1rem;background: #007aff;color:#fff;font-size:0.2rem;border: none;}

4）贴出chrome下审查的6和6plus版本下的效果图给大家

 

从图上可以看出，plus下的按钮等比被放大了。

 

再看6和6plus页面里的根字体，如下：

 

 

 

Plus下的根字体动态变化为110.4px。

最后给大家展示一张项目实战中的效果图：