Rem布局的原理探究

2018/01/10 前端圈

在用前端给移动端页面写布局时,我接触到了Rem布局,但是老实说我也看了几篇手淘适配的文章,并且主要的目的是拿到代码写出demo,所以对于Rem我还是停留在只会使用的阶段,但是理解的并不透彻,所以要抽出时间,把rem布局的原理搞清楚。

什么是em

我相信所有接触学习过css布局的同学,一定在rem之前先听到过em的大名,但是大多数也许跟我一样,只是听过或者最多跟着W3C上的教程敲过一下demo,之后的工作学习中并没有使用em这个单位,那么在聊rem之前,我们先聊聊em,毕竟混淆这两个单位的同学还是存在的。

用户的浏览器渲染的默认字体大小是”16px”,换句话说,Web页面中“body”的文字大小在浏览器下默认渲染是”16px”。当然,如果用户愿意也可以改变这个字体大小。而”em”是一个相对的大小,它的大小是相对于元素父元素的font-size。比如在body下直接写一个p标签,并且设置这个p标签的字体大小是”2em”, 那么其文字大小计算出来就是相当于2 * 16px = 32px。一个例子就能明了,em是相对于当前元素的父元素的font-size。而之前的弹性设计,有一个关键地方就是Web的所有元素都使用“em”单位。

体验后,是不是觉得弹性布局的页面很灵活呀,而且也像“px”一样的精确。因此,只要我们掌握了“font-size”、“px”和“em”之间的基本关系,我们就可以快速使用CSS创建精确的布局。

什么是Rem

看完了刚才em的介绍,是不是对于em的概念逐渐清晰,并且希望用em去构建自己的弹性布局呢。且慢,心急吃不了热豆腐,不妨听我把rem也慢慢的介绍完,毕竟主角光环的都是最后才出场的。rem是css3引入的一个单位,那我们为什么要在有em这个可以充当弹性布局的单位时还要引入rem呢?

em可以让我们的页面更灵活,比起到处写死的px值,em显得更有张力,根据比例的变化来调节屏幕。有的人提出用em来做弹性布局的页面,但是还是兔内污!如果你想一边看着标注图,一边算着em值,那你可以试试哦。不过聪明的程序员是不会去做这么无脑的事情的,所以有人写过px和em转换的计算器。但是你有没有想过,如果有一天,你的父节点的字体大小发生了变化,那么对于全局可能会产生相当大的影响,手算的同学是不是要全部重新计算,唉,害怕的我直接去写px了。😨!

所以针对这种繁琐运算的情况,rem应运而生,我们是这样定义rem的:

rem作用于非根元素时,相对于根元素字体大小;rem作用于根元素字体大小时,相对于其出初始字体大小

rem的取值有两种情况,就是设置根元素和非根元素的时候,下面看个例子:

html {
	font-size: 2rem;
}

html是我们html页面的根元素,之前介绍em的时候,我们就知道浏览器默认渲染的字体大小是16px,所以html的字体大小是2rem,那么rem作用于根元素的字体大小相当于其初始字体大小的定论的话,html的字体大小就是32px。

p {
	font-size: 2rem;
}

而上面p标签的这个例子中,我们之前已经知道html的字体大小是32px,那么p标签的字体大小就是2 * 32px = 64px

所以如果我们能合理的设置根元素的字体大小,那么rem的计算就会变得非常容易,比如手淘提出的将屏幕等宽划分成100份,那么标注图上的10px,即为0.1rem。所有的标注值除以100即可,根本不需要有计算的过程。

其实rem布局的本质也就是等比缩放,一般是基于宽度,假设我们将屏幕宽度平均分成100份,每一份的宽度用x表示。 x = 屏幕宽度 / 100, 如果将x作为单位,x前面的数值就代表屏幕宽度的百分比。

p { width: 50x } //屏幕宽度的50%

而理解到这里,其实我们也就知道我们让页面最上面跑的js代码到底是什么意思了,我们就是需要让html元素字体的大小,恒等于屏幕宽度的1/100。那1rem和1x就等价了。

rem我们就分析到这里,到这里,可能有人会觉得在这个比较之下,em似乎完全没有用武之地,但是一个技术的存在肯定是得到很多使用者的肯定的,也是设计者几经考量才能决定放出使用的,所以技术没有高低,只是他们适用的场景,rem可能更适合写布局,而em可能就更适合来表达字体大小。所以我们要探究原理,选择合适的技术,提高自己的工作效率和作品质量。

今天的探究就到这里,rem的代码我就不贴了,手淘的代码一搜一大把呢。

Search

    Table of Contents