适配篇-爱上自适应: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版本下的效果图给大家

preview

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

再看6和6plus的页面里的根字体:

preview

plus下根字体大小变成了110.4px。

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

发表评论

邮箱地址不会被公开。 必填项已用*标注