理解和使用CSS中的rem单元

  • A+
所属分类:JQUERY API

什么是对像单位?

你可能遇到过“R.E.M”这个词在听收音机或你的音乐播放器之前。不像他们的音乐同行,命名为“快速眼运动”在深度睡眠,在CSS雷姆代表“根em”。他们不会让你失去信仰,也不会相信月球上的人。他们能做的是帮助你实现一个和谐和平衡的设计。

根据W3C规范一个对地单位的定义是:

的计算值等于

1
font-size

在根元素上。当在

1
font-size

属性的根元素,rem单位指的是该属性的初始值。

这意味着

1
1rem

的字体大小。

1
html

元素(对于大多数浏览器来说,该元素的默认值为16 px)。

REM单元与Em单元

EM单元的主要问题是它们相对于它们自己元素的字体大小。因此,它们可以级联并导致意外的结果。让我们考虑下面的示例,其中我们希望列表的字体大小为

1
12px

,在根目录字体大小为默认值的情况下

1
16px

:


1
2
3
4
5
6
7
html {
font-size: 100%;
}

ul {
font-size: 0.75em;
}

如果在另一个列表中嵌套了一个列表,则内部列表的字体大小将是其父列表大小的75%(在本例中)。

1
9px

)。我们仍然可以通过使用这样的方法来克服这个问题:


1
2
3
ul ul {
font-size: 1em;
}

然而,我们仍然需要对嵌套变得更深的情况给予大量的关注。

有了对地单位,事情就更简单了:


1
2
3
4
5
6
7
html {
font-size: 100%;
}

ul {
font-size: 0.75rem;
}

由于所有大小都是从根字体大小中引用的,因此不需要在单独的声明中覆盖嵌套情况。

用RIM单位进行字体尺寸设计

使用rem单位进行字体调整的先驱之一是jonathansnook和他的用REM调整字体大小文章,回溯到2011年5月。和许多其他CSS开发人员一样,他不得不面对EM单元在复杂布局中带来的问题。

在那个时候,旧版本的IE仍然有很大的市场份额,他们无法缩放大小为像素的文本。然而,正如我们前面所看到的,在EM单元中很容易忘记嵌套并获得意想不到的结果。

使用rem进行字体大小调整的主要问题是,这些值有点难以使用。让我们看看以rem单元表示的一些常见字体大小的示例,当然,假设基本大小为16 px:

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

我们可以看到,这些数值不太便于计算。因此,斯诺克用了一个叫做“62.5%“这绝不是一个新发现,因为它已经与EM单位一起使用了:


1
2
3
4
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的解决方案变体如下:


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

其中一个还必须考虑到其他不支持rem的浏览器。因此,上面的代码实际上是这样编写的:


1
2
3
4
5
6
7
8
9
10
11
12
13
html {
font-size: 62.5%;
}

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

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

虽然这一解决方案似乎接近“金科玉律”的地位,但也有人建议不要盲目地使用它。哈里·罗伯茨他自己对对地单位的使用的看法...在他看来,而62.5%解决方案使计算更容易(如

1
px

是他们的rem值的10倍),它最终迫使开发人员显式地重写他们网站中的所有字体大小。

第三视图来自CSS-Tricks的克里斯·科伊尔(ChrisCoyier)。他的解决方案利用了我们到目前为止遇到的所有三个单位。他将根大小定义为

1
px

,定义了用rem单元定义的模块,以及用em大小的模块中的元素。这种方法可以更容易地操作全局大小,即缩放模块中的类型,而模块内容则根据模块字体大小本身进行缩放。LouisLazaris在CSS中EM单元的功率.

在下面的示例中,您可以看到Chris的方法看起来如何:

在实践中,有一些主要的框架,如自举4而材料设计使用rem单元调整文本内容大小的指南。

特别提到材料用户界面,一个非常流行的反应组件集合。它们不仅以相同的方式调整文本的大小,而且还提供了一种机制来实现我们前面提到的“10 px简化”。

另一个最近的项目,每一个布局,以一种非常有灵感的方式组合他们和雷姆单位。它与ChrisCoyier之前的模型大纲最接近,它使用em单元来强调内联元素,如SVG图标、SPAN或其他类似元素。

正如你所看到的,没有“银弹”解决方案。可能的组合仅限于开发人员的想象。

对媒体查询断点使用REMS

在媒体查询中使用em或rem单元与“最佳行长”的概念以及它如何影响阅读体验密切相关。2014年9月,“粉碎杂志”发表了一份关于网络排版的综合研究报告。尺寸问题:响应式网页设计中线条长度和字体大小的平衡...在许多其他有趣的事情中,文章给出了最佳行长的估计:45-75-85个字符(包括空格和标点符号),其中65个是“理想”目标值。

使用1 rem=1字符的粗略估计,我们可以以移动优先的方式控制单个内容列的文本流:


1
2
3
4
5
6
7
8
9
.container {
width: 100%;
}

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

然而,在用作媒体查询单元时,rem和em单元有一个有趣的细节:它们始终保持相同的值,即1rem=1em=浏览器设置的字体大小。此行为的原因在媒体查询规范(强调后加):

媒体查询中的相对单位是基于初始值的,这意味着单位永远不会基于声明的结果。例如,在HTML中,em单元相对于由用户代理或用户首选项定义的字体大小的初始值,而不是页面上的任何样式。.

让我们看看这个行为的一个快速示例:

在CodePen上查看媒体查询演示

首先,在我们的HTML中,我们有一个

1
<span>

元素,其中我们将写入视图端口的宽度:


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

接下来,我们有两个媒体查询,一个使用rem单元,另一个使用em单元(为了简单起见,使用Sass):


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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 */
}
}

最后,我们使用一些jQuery在页面上显示viewport宽度,当窗口大小改变时更新值:


1
2
3
4
5
$('span').text($(window).width());

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

我们从62.5%显示修改后的根字体大小对媒体查询使用的值没有任何影响的技巧。当我们改变浏览器窗口的宽度时,我们可以看到,第一个媒体查询以320 px(20×16 px)开始,而第二个媒体查询在480 px(30×16 px)时处于活动状态。没有

1
font-size

我们声明的更改对断点有任何影响。更改媒体查询断点值的唯一方法是修改浏览器设置中的默认字体大小。

因此,如果我们将em或rem单元用于媒体查询断点并不重要。ZURB基金会(目前的版本为V6.5.3)在媒体查询中使用em单元。

无障碍探索

我们在上面已经看到,基于根字体大小进行缩放的能力使得rem单元对于可访问性非常有用。Google开发人员建议使用相对单位进行文本大小调整.

有一个互联网档案馆幕后人的实证研究显示有大量用户在浏览器设置中更改其默认字体大小。通过使用rem和其他相关单位,您尊重用户关于他们想要浏览网络的方式的决定。

使用rem单元来缩放文档

对于rem单元,我们可以找到的第三个用途是构建可伸缩的组件。通过在rem单元中表示宽度、边距和填充,就可以创建一个与根字体大小一致的界面。让我们用几个例子来看看这个东西是如何工作的。

使用rem单元缩放文档演示#1

在第一个示例中,我们使用媒体查询更改根字体大小。和上一节一样,它的目的是为所使用的设备定制阅读体验。当元素填充值和边距使用rem表示时,整个组件与设备大小成比例。

让我们看看另一个:

在第二个例子中,我们使用JavaScript进行同样的修改。这一次,用户可以控制界面的大小,根据他的需要对其进行调整。添加一种存储这些自定义值的方法(使用数据库、cookie或本地存储),您就拥有了基于用户首选项的个性化设置系统的基础。

avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: