相信很多准备开始写移动端页面的同学都会头痛一个问题——如何做页面的自适应?
当然解决方案很多,比如:流式布局,弹性布局也都能获得不错的效果,小编也会在后期陆续去整理这些方案,但是今天主要介绍的是本人在实践中用的最顺手最简单的布局方案——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。
最后给大家展示一张项目实战中的效果图: