文档章节

REM实战

Mr.Zheng
 Mr.Zheng
发布于 2015/11/08 15:32
字数 2104
阅读 97
收藏 1

前两天有个朋友问起关于rem的一些问题,让我有些在意。因为随着CSS3的逐渐成熟,在优雅降级/渐进增强原则的保障下,很多CSS新特性已经不在是试用特性,而是在Web设计中得到广泛推行和应用!而CSS3新增的单位rem也在其列,当朋友问起时,我才意识到自己对这个单位也并不是很了解,趁着周末有些闲暇时光,不妨给自己的大脑充充电。

定义

Equal to the computed value of font-size on the root element. (W3C)

直译是“与根元素的字体大小相等”,当然也有一种更直接的理解root em。我们知道在HTML中根元素其实也就是<html>元素,所以rem单位其实是相对于<html>元素的字体大小而言的。

场景

为了方便说明rem单位的功效,我们先来构造一个很常用的页面结构,然后分别使用px和rem在对比实现。通常我们在制作博文阅读页面的时候都会先将博文的标题(h2.article-title)显示,然后后面紧跟丰富的博文内容(div.article-body),最后可能还会在博文的尾部(div.article-foot)显示作者或发布时间等等。而为了让文章的结构更为清晰,我们一般会将文章的标题放大突出显示,而结尾可能也会做缩小弱化处理,大致结构如下:

<div class="article">
    <h2 class="article-title">这是文章的标题</h2>
    <div class="article-body">
        我通常把文章内容放置在这里。<br>这样看起来比较舒服。
    </div>
    <div class="article-foot">
        发布人:MrZheng 发布时间:2015/11/08
    </div>
</div>

我们可能希望在页面上显示的效果是这样的:

我们这里不去关心布局,只看字号:标题18px,内容14px,尾部12px。接下来我们来看看如何分别使用px和rem来实现预览样式。

px VS rem

首先是使用px实现:

.article-title {font-size: 18px;font-weight: normal;}
.article-body {font-size: 14px;margin: 10px 0;}
.article-foot {font-size: 12px;}

然后,我们看看rem版本:

html {font-size: 10px;}
.article-title {font-size: 1.8rem;font-weight: normal;}
.article-body {font-size: 1.4rem;margin: 10px 0;}
.article-foot {font-size: 1.2rem;}

为了验证rem单位最终在浏览器上显示的字体大小确实是预设的18px,14px和12px,我使用Chrome调试工具在Elements面板的Computed面板查看了结果:

好了,说明rem最终实现的效果确实可以达到和直接使用px一样的结果。但是单从上面的代码来看,我们发现使用rem其实比使用px需要更多的代码,而且也并没有发现其他什么优势,那么CSS3为什么会增加这个单位呢?

rem的优势

我们从上面的代码中可以发现,在使用rem的时候,我们给标题、内容、尾部设置字体的时候使用的是一个小数,而最终我们在浏览器中看到的却是我们需要的18px、14px和12px,结合定义部分提到的rem是相对于根(html)元素计算的,那么就好理解了,以标题为例:10px * 1.8 = 18px。所以,rem的优势便不言而喻了,可以通过修改html元素的font-size直接控制整个网站的字体乃至其他尺寸属性的值的大小(诸如:margin,padding等)。

那么,有人可能会问:我的网页放在那里显示得好好的,我没事改什么字体大小,调什么间距?即便久了我想换换风格,那也可能改改颜色,换换布局,跟这尺寸单位压根儿没多大关系吧?

其实并不是这样的,我来给大家说两个情况。

第一,我们做网页,要考虑到访问我们网页的各个群体。要考虑视力好的,也要考虑视力差的;要考虑喜欢看大字多翻页的,也要考虑看小字多显示内容的。所以当有一天我们的网页需要增加一个点击按钮切换大、正常、小甚至更多字号的时候,你就会意识到rem是多么的让你感动了。还是以上面的场景为例,我们假设通过在html标签上增加class来切换字体。

先看px的:

.article-title {font-size: 18px;font-weight: normal;}
.article-body {font-size: 14px;margin: 10px 0;}
.article-foot {font-size: 12px;}
/* 大字号 */
html.big .article-title {font-size: 27px;}
html.big .article-body {font-size: 21px;}
html.big .article-foot {font-size: 18px;}
/* 小字号 */
html.small .article-title {font-size: 14.4px;}
...此处省略几行

再看看使用rem的:

html {font-size: 10px;}
.article-title {font-size: 1.8rem;font-weight: normal;}
.article-body {font-size: 1.4rem;margin: 10px 0;}
.article-foot {font-size: 1.2rem;}
/* 大字号 */
html.big {font-size: 15px;}
/* 小字号 */
html.small {font-size: 8px;}

其优势,就不用我再多说了吧?

第二,在移动智能设备剧增,响应式网页设计如此火热的时代,我们在设计网页的时候,怎能不考虑移动设备,怎能不考虑移动设备高清屏?!通常移动设备的显示区域比起传统PC电脑已经少了很多很多,如何能在更小的区域显示更多的内容,一直是设备产商和开发者们努力的方向。高清屏的出现很大程度上解决了这个问题,有了高清屏就意味着在传统PC上的字号即便缩小一半,放到高清屏上仍然能够保证清晰可识别,不影响阅读,也不会导致信息丢失。所以,现在网页设计的时候通常会考虑在PC和Mobile中使用不同的字号等样式,那么问题来了,还是像第一个问题一样,在媒体查询中一个一个字号去覆盖吗?这显然是不科学的做法,虽然能达到我们想要的效果,但是成本是相当高的,而且费力不讨好。还是以上面的场景为例。

还是先看px的:

.article-title {font-size: 18px;font-weight: normal;}
.article-body {font-size: 14px;margin: 10px 0;}
.article-foot {font-size: 12px;}
@media all and(max-width: 480px) {
    .article-title {font-size: 9px;}
    .article-body {font-size: 7px;}
    .article-foot {font-size: 6px;}
}

再看rem版本的:

html {font-size: 10px;}
.article-title {font-size: 1.8rem;font-weight: normal;}
.article-body {font-size: 1.4rem;margin: 10px 0;}
.article-foot {font-size: 1.2rem;}
@media all and(max-width: 480px) {
    html {font-size: 5px}
}

好了,不举其他的了,相信肯定还有更多的应用场景,但是这两个需求已经有足够的理由让我们去学习和尝试使用rem了。

好东西也有烦恼

至此,rem的优势不用再多说了,但是这么好的东西,我们在实际使用中却并非尽如人意:

这是在caniuse上截下来的rem的兼容性情况,看到左上角那块耀眼的红色了么?在国内IE覆盖还非常广泛的情况下,这块红色带给开发者的痛是痛彻心扉的,但是作为开发者,作为用户体验的服务方,我们很多情况下没理由去放弃他们,那么怎么解决rem的兼容性问题呢?

其实,也不难!CSS中不可被识别的属性或值会被浏览器自动忽略,所以,当我们在使用rem的时候,只要再增加一个px单位的尺寸,那么就可以解决IE8及以下版本浏览器的兼容性问题:

html {font-size: 10px;}
.article-title {font-size: 18px;font-size: 1.8rem;font-weight: normal;}
.article-body {font-size: 14px;font-size: 1.4rem;margin: 10px 0;}
.article-foot {font-size: 12px;font-size: 1.2rem;}
@media all and(max-width: 480px) {
    html {font-size: 5px}
}

总结

rem是一个非常有用的单位,在网页设计中常常可以带来事半功倍的效果,但是并不意味着rem可以替代所有的单位,有时候结合使用,相互配合,反而会达到意想不到的效果。然而,新东西的出现虽然总能让人耳目一新,但是却也常常会伴随着很多让人苦恼的坑,还需要我们慢慢去雕琢,慢慢去完善。

作者博客:百码山庄

© 著作权归作者所有

共有 人打赏支持
Mr.Zheng
粉丝 53
博文 22
码字总数 38792
作品 0
杭州
网页/平面设计
私信 提问
使用Flexible实现手淘H5页面的终端适配

曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜。可没想到到了移动时代,为了处理各终端的适配而乱了手脚。对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页...

问题达人
2016/03/29
29
0
使用Flexible实现手淘H5页面的终端适配--大漠

曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜。可没想到到了移动时代,为了处理各终端的适配而乱了手脚。对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页...

拉普拉斯婷
2016/12/15
35
0
Jenkins实战演练之Windows服务器快速搭建

【准备】 操作系统:Windows Server 2008 R2 Enterprise JAVA版本:server-jre-7u45-windows-x64.tar.gz Jenkins版本:jenkins.war(v1.545) 【步骤】 采用Stand-Alone方式运行Jenkins服务器......

woneiware
2014/01/09
0
0
[H]-前端周刊

爱总结的周刊君 webpack webpack 中的 manifest.js 有何用途 本篇文章带你了解 webpack 打包之后的 manifest.js 文件 链接: mp.weixin.qq.com/s/gHMj-Y7Nk… vue.js 美团点评点餐 Nuxt.js ...

前端新视野
2017/11/14
0
0
理解rem实现响应式布局原理及js动态计算rem

前言   移动端布局中,童鞋们会使用到rem作为css单位进行不同手机屏幕大小上的适配。那么来讲讲rem在其中起的作用和如何动态设置rem的值。 1、什么是rem   rem是相对于根元素(html标签)...

damon风
2017/11/22
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Httpd 整合 Tomcat 步骤

环境:Tomcat8 + Httpd2.4 工作原理:借助于Tomcat的AJP连接器实现Apache与Tomcat的通信 配置步骤: 1. 配置httpd.conf 新增: Include conf/extra/mod_jk.conf 修改:添加 index.jsp <IfM...

ZeroneLove
昨天
1
0
Docker笔记3——容器命令(未写完,明天整理接着写)

未写完,明天整理接着写 新建并启动容器 docker run docker run [OPTIONS] IMAGE [COMMEND] [ARG...] OPTIONS: --name=[容器新名字] :为容器指定一个名称 -d:后台运行容器,并返回容器ID,...

HappyBKs
昨天
1
0
2018个人年终总结

感谢领导的信任和指导,新的一年获得了很多成长和提高,改掉了很多不好的习惯。 在这一年里,我在领导的帮助下,主要完成了以下功能: 1、完成上海银行版本投资营销相关功能的开发。 2、完成车...

万山红遍
昨天
9
0
保密工作与linux系统的发展

保密工作从性质上可以分成商业方面的保密和国家安全方面的保密。由于自己从事的是IT方面的工作,工作中必然会接触涉及到计算机信息方面的相关文件。加上单位已近通过武器装备科研生产单位二级...

linux-tao
昨天
2
0
Spark共享变量

概述 Spark程序的大部分操作都是RDD操作,通过传入函数给RDD操作函数来计算。这些函数在不同的节点上并发执行,但每个内部的变量有不同的作用域,不能相互访问,所以有时会不太方便,Spark提...

仟昭
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部