Rem布局的原理探究

在用前端给移动端页面写布局时,我接触到了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的代码我就不贴了,手淘的代码一搜一大把呢。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏逍遥剑客的游戏开发

简单的运动模糊效果实现

19740
来自专栏数据小魔方

R语言信息可视化——文字云

这一篇跟大家分享R语言信息可视化——文字云。 R语言可以轻松处理信息可视化,并且很早就有专用的信息可视化包——WordCloud。 可是这个第一版的文字云工具,...

44980
来自专栏BestSDK

最实用的6个设计排版准则

作为一个设计师的最重要技能之一就是你要学习如何去选择排版。这是因为文本是设计师与用户沟通的主要方式之一。排版能成就你的设计,也能毁灭你的设计。 一个美观又复杂的...

32340
来自专栏企鹅号快讯

技术干货:前端图形化技术简介(上)

Canvas与SVG 前端图形化技术,主要包括Canvas绘图和SVG绘图两类。 ? Canvas早在十几年前就被火狐浏览器引入。Canvas通过Canvas....

25370
来自专栏葡萄城控件技术团队

位图和SVG用法比较

位图,亦称为点阵图像或绘制图像,是由称作像素(图片元素)的单个点组成的。这些点可以进行不同的排列和染色以构成图样。当放大位图时,可以看见赖以构成整个图像的无数单...

29360
来自专栏MixLab科技+设计实验室

从Storyboard到DIY实现一个漫画生成器-01

用户只需拍摄一段视频并将其加载到 Storyboard 中即可将视频转换为单页漫画的布局。该应用会自动选择有趣的帧,并将其应用于6种视觉样式中的一种。生成的漫画...

15740
来自专栏天天P图攻城狮

终端图像处理系列 - 图像混合模式的Shader实现

在图像处理应用中,将两张或者多张图片混合显示是非常常见的一种操作,应用场景包括但不限于:加水印、标签,插入画中画,遮盖等等...

1.2K170
来自专栏Android机动车

开发中的动效设计与实现 —— 贝塞尔曲线动画的插值法

一个动画一般有这些参数 —— 动画时间、属性变化量、以及贝塞尔插值曲线。在动效标注的时候,也只需要标注这些参数就可以完整的给UI研发写动效了。一个动效所涉及的元...

24820
来自专栏菜鸟前端工程师

html+css学习笔记018-H5弹性盒模型

16620
来自专栏大数据钻研

canvas图形绘制之星空、噪点与烟雾效果

一、三合一 三个效果合成一篇文章。 有多个小伙伴问我,为何不开个公众号,现在都是移动时代,你博客文章写好后,公众号再复制一份,花不了多长时间,同时传播方便迅速,...

36440

扫码关注云+社区

领取腾讯云代金券