了解并使用 CSS 中的 rem 单位

更新日期: 2019-11-09阅读: 1.6k标签: rem

今天我们深度了解一下 rem 单位,这个单位目前已经得到了优秀浏览器的支持,并且有一些兼容方案来帮助你在低版本的 IE 浏览器中的使用它。


什么是 rem

可能在你使用收音机或者用其他音乐播放器之前,就已经听过“R.E.M.”这个词了。在这个乐队眼中,这个词是“浅睡眠时眼球的快速转动”的缩写,而在 css 中,rem 代表着“以根元素为参照物的 em 单位“。他不会让你抛弃你的宗教信仰也不会让你相信那个远在月球的人,但是它可以帮助你实现一个和谐、平稳的设计。

根据 W3C 规范中对 1rem 的定义:

1rem 与等于根元素 font-size 的计算值。当明确规定根元素的 font-size 时,rem 单位以该属性的初始值作参照。

这就意味着 1rem 等于 html 元素的字体大小(大部分浏览器根元素的字体大小为16px)


Rem 单位 vs Em 单位

使用 em 单位最主要的问题是他们与用户元素相关联。在这种情况下,这些元素可以相互嵌套并且造成意想不到的结果。我们来思考下面一个例子,在根元素的文字大小为默认值16px 的情况下,我们想要所有列表的字体大小均为 12px :

html {
  font-size: 100%;
}

ul {
  font-size: 0.75em;
}

假如有一个列表是嵌套在另一个列表下,那么内列表的字体大小将会是外列表字体大小的 75%(也就是 9px ),我们仍然可以通过几行代码来解决这个问题:

ul ul {
  font-size: 1em;
}

这样就可以解决这个问题,然而我么仍需要特别关注那些嵌套特别深的元素。

当使用 rem 单位后,事情就变得简单了:

html {
  font-size: 100%;
}

ul {
  font-size: 0.75rem;
}

当所有尺寸都以根元素的文字大小作为参照后,就不再需要为嵌套的元素单独定义样式了。


使用 rem 单位定义文字大小

Jonathan Snook 是第一批使用 rem 单位来定义文字大小的开发者,早在 2011 年 5 月,他就发表了题为《使用 rem 来定义文字大小》 的文章。和大多数 CSS 开发者一样,他必须去解决在 em 单位在复杂的布局上的一系列问题。

在那时候,老版本的 IE 依然有很大的市场份额,并且他们不可以缩放由 px 来定义的文本。然而,就像我们之前看到的那样,在使用 em 单位的情况下,很容易忘记元素之前的嵌套关系,并且得到一个意想不到的结果。

使用 rem 单位来定义文字的大小最大的问题在于这些值有点难以使用。让我们来看一个例子,假设根元素的文字大小是 16px,我们常用的文字大小转换为 rem 值如下:

  • 10px = 0.625rem
  • 12px = 0.75rem
  • 14px = 0.875rem
  • 16px = 1rem (base)
  • 18px = 1.125rem
  • 20px = 1.25rem
  • 24px = 1.5rem
  • 30px = 1.875rem
  • 32px = 2rem

正如我们看到的那样,这些值在计算起来非常不方便。因此,Snook 使用一个叫 62.5 的方式来解决这个问题。然而这并不是一个创新,因为它早已在 em 单位中运用了:

body { font-size:62.5%; }  /* =10px */
h1   { font-size: 2.4em; } /* =24px */
p    { font-size: 1.4em; } /* =14px */
li   { font-size: 1.4em; } /* =14px? */

因为 rem 单位与根元素相关联,Snook 改进后的方案变为了:

html { font-size: 62.5%; }  /* =10px */
body { font-size: 1.4rem; } /* =14px */
h1   { font-size: 2.4rem; } /* =24px */

有一点值得考虑的是有一些浏览器不支持 rem 单位。因此上面的代码可以按照以下方式来改写:

html {
    font-size: 62.5%;
}

body {
    font-size: 14px;
    font-size: 1.4rem;
}

h1 {
    font-size: 24px;
    font-size: 2.4rem;
}

尽管这个解决方案看起来是最好的解决方案,但还是有人不建议使用这种方式。Harry Roberts 写了一篇文章,里面记录了他在实际使用 rem 单位过程中的一些感受。从他的观点来看,虽然 62.5% 这种解决方案使得计算变得简单(因为字体大小以 px 为单位时的值正好是以 rem 为单位的 10 倍),但是他迫使开发者重写他们网站中的所有文字大小。

Chris Coyier 在 CSS-Tricks 提出了第三种解决方案。他的解决方式充分利用了到目前为止我们遇到的三种单位。根元素的长度单位依旧采用 px ,模块用 rem 单位,模块内的元素使用 em 单位。这种方式可以很容易的操作根元素的大小、缩放模块,模块内内容的大小以模块自身文字大小来进行缩放。Louis Lazaris 随后在 CSS 中 em 单位的强大之处 提出了他的观点。

在下面的例子中你可以看出 Chris 的解决方案是怎么工作的:

代码可以看 SitePoint(@SitePoint) 在 CodePen 写的 《在 CSS 中使用 em 和 rem 单位的方式》

正如你看到的那样,没有利用新技术来解决这个问题。可能一些组合方式仅仅被开发者的想象力所限制。


在媒体查询中使用 rem 单位

在媒体查询中利用 em 和 rem 单位,与“行的最佳长度”的概念密切向关,并能给用户带来流畅的阅读体验。在 2014 年 9 月,Smashing Magazine 在 web typography 发表了一篇名叫 尺寸那些事: 在 web 响应式设计中掌握文字大小与行宽度的平衡的文章。最有意思的是,文章给出了行的最佳宽度度,45 到 85 个字符(包括空格和标点符号),65 是最理想的行宽值。

粗略的估计一个字节大小就是 1rem,利用这个方法我们就可以用一种移动优先的方式控制内容的单行文本流:

.container {
  width: 100%;
}

@media (min-width: 85rem) {
  .container {
    width: 65rem;
  }
}

然而在媒体查询中使用 em 和 rem 单位作为媒体查询的条件时有一个有意思的细节:1 rem,1em 还有浏览器默认文字大小这三值表示这同一个值。这样做的原因可以在媒体查询规范得到解释(特别强调):

询中相对单位都是以一个初始值作为基准,这就意味着这些单位永远不会基于声明的结果。例如:在 HTML 中,em 单位与用户浏览器或者用户偏好设置中设置的初始文字大小有关,而不是页面上的样式中定义的文字大小。

让我们看一个关于这个特性的一个小例子:在 CodePen 上看一个关于媒体查询的 demo

首先,在我们的 HTML 文档中,有一个元素将会展现视口的宽度:

`Document width: <span></span>px`

接下来是两条媒体查询语句,一条是使用 rem 单位,另一条使用 em 单位(这里为了简便,使用了 Sass)

html {
  font-size: 62.5%; /* 62.5% of 16px = 10px */

  @media (min-width: 20rem) {
    /* 20*16px = 320px */
    background-color: lemonchiffon;
    font-size: 200%;
    /* 200% of 16px = 32px */
  }

  @media (min-width: 30em) {
    /* 30*16px = 480px */
    background-color: lightblue;
    font-size: 300%; /* 300% of 16px = 48px */(译:原文是48px)
  }
}

最后,我们使用一点 jquery 在页面上显示视口的宽度,并且在窗口缩放的时候更新这个值:

$('span').text($(window).width());

$(window).on('resize', function(e) {
  $('span').text($(window).width());
});

在开头,我们使用了 62.5% 这个方法来说明,修改根元素字体大小不会对媒体查询产生任何影响。当我们更改窗口的宽度时,我们可以看到在 320 px 时,第一条媒体查询开始起作用,到480px第二条媒体查询开始起作用。任何一条在媒体查询中对文字大小声明的改变都没有起作用。唯一一个可以改变媒体查询中宽度的是在浏览器里更改默认文字大小。

因为这个原因,在媒体查询语句中使用 em 单位还是 rem 单位已经不那么重要了。事实上,无论是Foundation v5还是最近刚发布的Bootstrap v4 alpha都在他们的媒体查询中使用了 em 单位。


使用 rem 单位来缩放文档

我们能发现的第三种使用 rem 单位的方式是去构建可缩放组件。使用 rem 来定义元素的宽度,外边距和内边距 通过使用根元素的字体大小作为一个接口使元素缩放一致变为了可能。 我们可以通过下面两个例子来看这是怎么起作用的。

使用 rem 来缩放文档实例一

在这个例子里,我们通过媒体查询中更改根元素的文字大小。就像上一个章节所讲,这样做的目的是为用户定制不同设备下的不同阅读体验。通过 rem 单位来表示宽度,外边距,内边距,这样所有元素就会基于用户的设备大小缩放。

让我们看另一个例子:

代码可以看 SitePoint(@SitePoint) 在 CodePen 写的 《使用 rem 动态缩放模块》

在第二个例子中,我们使用 JavaScript 来做同样的操作。这次用户根据自己的需要手动控制界面的大小。我们可以使用多种方式(可以使用数据库,cookie 还有本地存储)来存储用户数据,这样就可以给用户搭建一个基于用户偏好的个性化系统。


总结

在这里总结一下到目前为止我们对 CSS 中 rem 单位的认识。很显然,在项目中使用 rem 有许多优点,比如:响应式,可缩放,增加阅读体验,增加自定义元素的灵活性。rem 虽然不是一个通用的解决方案,但是通过谨慎的使用,它还是可以解决困扰开发者多年的问题。 我们每个人都可以去挖掘 rem 的所有潜能。从你的编辑器开始吧,实验并向我们分享您的成果。


链接: https://www.fly63.com/article/detial/8920

适用于移动设备弹性布局的js脚本(rem单位)

目前,随着移动设备的普及和4G网络的普及,web在移动端的占比已经远远超过PC端,各种H5页面推广页面,H5小游戏热度火爆。以前简单的使用px单位(没有弹性)的时代已经无法满足各位设计师和用户了

rem布局完成响应式开发,通俗且详细的原理解析和代码实现

rem可以理解为一个长度单位,单位rem的值等于网页font-size的值。如果网页的字体大小为默认值16px,那么1rem就等于16px,0.5rem等于8px。根据这个原理,如果网页默认的字体大小改变,那么单位rem的大小也会改变

移动端适配flexible rem布局方案

如果你看了很多篇文章,对 flexible 的解决方案一直还有一种不太了解的朦胧感觉,那么这篇文章会帮你从背景角度一步一步解析为何会有 flexible 这套解决方案,以及这套解决方案是如何作用的。

移动端rem适配

1:css3的media query来实现适配,例如下面这样;2.通过js动态设置html字体,例如下面这样:默认设计图为640的情况下1rem=100px;根据自己需求修改

rem js相关

规则就是,调用函数,放两个参数,第一个参数,是设计稿的宽度,第二个参数是px与rem的转换比例,通常会写100(因为好算);当然了,要把这段js代码最好封装在一个单独的js文件里,并且放在所有的css文件引入之前加载

小程序如何实现rem?

最近在学习小程序,要把html的代码转换成小程序界面,其中就遇到了rem的转换问题,但小程序不太兼容rem,不是不能用rem,而是没办法设置根元素的font-size,因为rem是相对于根元素的font-size

css rem应用

根据设计稿的实际宽度值,与设计稿最大宽度值,动态计算根字体大小,适应不同的屏幕比例。本文的px转rem换算公式为:100px = 1rem

华为,小米部分机型微信浏览器rem不适配的解决方案

针对近日华为,小米的部分机型,在升级系统或升级微信之后,微信内置浏览器产生的rem不能正确填充满的问题,有如下解决方案,目前来看,产生这个情况的原因是因为给html附font-size时

css中1px等于多少rem?

rem是CSS3中新增加的一个单位值,他和em单位一样,都是一个相对单位。不同的是em是相对于元素的父元素的font-size进行计算;rem是相对于根元素html的font-size进行计算。rem 和 em 一样,也是一个相对大小的值,它是相对于根元素 <html>。

rem是如何实现自适应布局的?

rem是相对于根元素<html>,这样就意味着,我们只需要在根元素确定一个px字号,则可以来算出元素的宽高。本文讲的是如何使用rem实现自适应。 rem这是个低调的css单位,近一两年开始崭露头角

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!