专栏首页编程之旅Rem布局的原理探究

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 条评论
登录 后参与评论

相关文章

  • Swift 宏定义与代码标记

    写Objective-C的时候常常会用到各种宏定义,但是Swift中貌似没有宏的这种定义,更多的是通过全局常量或者全局函数来实现这一效果.我们只需要建立一个文件...

    Originalee
  • Python——搞定烦人的字符串编码

    在学习Python之前,就听说过Python的版本圣战,最可怕的是有的写Py3的程序员觉得Py2是另一种语言....所以在刚开始学习的时候,我索性把Python...

    Originalee
  • 数据结构——队列

    我们在使用手机的时候,偶尔都会碰到过卡住的时候,比如一个地方怎么点都没有用,屏幕也卡住不显示其他东西,但当你把卡住的App关闭掉之后,手机的操作显示就又恢复正常...

    Originalee
  • 软件推荐(蜜蜂剪辑) -- 剪辑软件(限免)

    今天是软件专场的倒数第84场,跟大家分享的是逼格很高操作很傻瓜式的剪辑软件--蜜蜂剪辑。最重要的是它限免,恰逢年终需要做一些逼格很高的视频来诉说2019的辛酸...

    丰臣正一
  • 丢人了!英伟达抄代码也就算了,竟然把人家的License都改成自己的

    今天一早,营长像往常一样打开手机,来Reddit上看看大家都在讨论啥。 网友Ouitos被人抄代码并改License的声讨,顿时激起了营长的义愤。 ? 仔细看...

    AI科技大本营
  • ASP.NET MVC5+EF6+EasyUI 后台管理系统(47)-工作流设计-补充

    补充一下,有人要表单的代码,这个用代码生成器生成表Flow_Form表的Index代码就可以 加上几个按钮就可以了 <div class="mvctool"> ...

    用户1149182
  • 加工中心编程详解

    准备功能G代码用来规定刀具和工件的相对运动轨迹、机床坐标系、坐标平面、刀具补偿、坐标偏置等多种加工操作。数控加工常用的G功能代码见表4-1.

    用户7505898
  • 细数国内外前端大牛的知乎与博客(转)

    简介: 目前阿里p7,70后,英文名Frank。 他原是上海财经大学世界经济博士研究生。主要研究宏观金融、货币政策与美国经济。于2008年6月获得博士学位。...

    celineWong7
  • WassersteinGAN 代码 一览

    1 keras : tensorflow https://github.com/tdeboissiere/DeepLearningImplementation...

    用户1908973
  • ubuntu 14.04 下安装 PyTesser 进行OCR识别

    玩python期间,看到好多用python做的爬虫,感觉挺好玩,就开始了爬虫之旅的学习,期间受一些教程的启发想去试试学校的教务系统,可惜登录需要验证码,于是四处...

    汐楓

扫码关注云+社区

领取腾讯云代金券