资讯专栏INFORMATION COLUMN

如何更愉快地使用rem —— 别说你懂CSS相对单位

Snailclimb / 2675人阅读

摘要:值得注意的是,这个设置对使用或其他绝对单位定义的字号大小无效。事实上,提供了一个在和间的相对单位折中解决方案,而且更易于使用。图使用相对单位和继承字号的面板下面是模板,加到你的页面吧。

前段时间试译了Keith J.Grant的CSS好书《CSS in Depth》,其中的第二章《Working with relative units》,书中对relative units的讲解和举例可以说相当全面,看完之后发现自己并不太懂CSS相对单位,也希望分享给大家,所以有了这个译文系列。(若有勘误或翻译建议,欢迎 Github PR ^_^

《别说你懂CSS相对单位》系列译文:

如何更愉快地使用em

如何更愉快地使用rem [本文]

视口相关单位的应用

无单位数字和行高

CSS自定义属性

本文对应的章节目录:

2.2 em和rem

2.2.2 对font-size使用rem

可用性:对font-size使用相对长度单位

2.3 停止使用像素思维去思考

2.3.1 设置一个合理的字号默认值

2.3.3 让这个面板变得“响应式”

2.3.3 调整单个组件的大小

2.2 em和rem 2.2.2 对font-size使用rem

当浏览器解析HTML文档时,创建了一个用来代表页面元素的集合,叫做DOM(文档对象模型,Document Object Model)。树状结构,每一个节点代表一个元素。就是顶层节点(根节点),在下面的是它的子节点,再往下就是它们的子节点,还有后代节点,如此类推。

根节点是文档里所有其他元素的祖先。它有一个特别的伪类(pseudo-class)选择器(:root),在样式表里可以用这个选择器表示。使用带类名的类型选择器html,或者直接用标签选择器,效果是一样的。

rem是根em(root em)的缩写。rem是和根元素关联的,不依赖当前元素。不管你在文档中的什么地方使用这个单位,1.2rem的计算值是相等的,等于1.2倍的根元素的字号大小。下面的示例代码中,声明了根元素的字号大小,并在嵌套的无序列表中使用rem声明字号大小。

[ 代码片段 2.10 使用rem声明字号大小 ]

:root {                    1
  font-size: 1em;          2
}

ul {
  font-size: .8rem;
}

1 伪类 :root 等价于 html 选择器

2 使用浏览器的默认字号大小(16px)

在这个示例里,根字号大小是浏览器的默认大小16px(根元素的1em等于浏览器的默认字号大小)。无序列表的字号大小为0.8rem,计算结果是12.8px。因为这只跟根元素相关,尽管你在列表里嵌套了列表,嵌套子列表的字号仍然保持不变。

可用性:对font-size使用相对长度单位

一些浏览器会提供给用户2种方式定制文字的大小:缩放和设置一个默认的字号大小。通过按Ctrl+或者Ctrl-,用户可以对页面进行缩放。这在视觉上会把整个页面的文字或图片(其实是所有元素)都放大或缩小了。在一些浏览器,这个改变只针对当前的标签页且是临时的,不会影响到新开的标签页。

设置默认字号大小,会有点不一样。不仅仅是设置的入口比较难找(一般在浏览器的设置页),而且这个设置是永久的,直到用户把默认值还原。值得注意的是,这个设置对使用px或其他绝对单位定义的字号大小无效。因为默认字号大小对一些用户是必要的,尤其是弱视的群体,你应该用相对单位或百分比来定义字号的大小。

rem简化了很多em带来的复杂度。事实上,rem提供了一个在px和em间的相对单位折中解决方案,而且更易于使用。那么,是不是意味着你应该在对所有元素都使用rem,去掉其他长度单位呢?当然不是。

在CSS的世界里,这个答案通常是,看情况。rem只是你的工具箱中的其中一个。掌握CSS很重要的一点,就是学会分辨在什么场景下该使用什么工具。我的选择是,对font-size使用rem,对border使用px,对其他的度量方式如paddingmarginborder-radius等使用em。然而在必要时,需要声明容器的宽度的话,我更喜欢使用百分比。

这样,字号大小就变得可预测,而当其他因素影响到元素的字号大小时,你也可以借助em去缩放元素的padding和margin。在border上使用像素是很合适的,尤其当你想要一根漂亮的线的时候。以上就是我对不同属性使用不同单位的理想方案,不过我要再次声明,这些都是工具,在某些特定场景下,利用不同的工具可能取到更好的效果。

提示  

当你不确定的时候,对font-size使用rem,对border使用px,以及对其他大多数属性使用em。

2.3 停止使用像素思维去思考

把页面的根元素字号大小定义为0.625em或者62.5%,在最近几年来,这样的用法很常见,这是一种模式,或者更贴切地说,这是一种反模式。

[ 代码片段 2.11 反模式:全局地把font-size定义为10px ]

html {
  font-size: .625em;
}

我并不推荐这种用法。这个用法把浏览器默认的字号大小16px缩小到10px。这样做的好处是简化了计算,如果设计师告诉你字号大小应该是14px,那你可以很轻易地计算出1.4rem,毕竟我们还是在使用相对单位。

一开始,这看起来很方便,但事实上这样的实现方式有两个问题。第一,强制你写了很多重复的样式代码。10px对于大多数文本来说太小了,你需要在整个页面中,来来回回地覆盖它。你会发现,自己把一段段落(

)的字号大小声明为1.4rem,然后又把导航(

相关文章

  • 单位数字和行高 —— 别说你懂CSS相对单位

    摘要:无单位数字和行高有一些属性可以接收不带单位的数值意思就是一个不带长度单位的数字,如和等于,等于,如此类推。警告不带单位的只可以表示长度单位和百分比的值,譬如和。段落继承了的行高。长度有两种类型绝对的和相对的。 前段时间试译了Keith J.Grant的CSS好书《CSS in Depth》,其中的第二章《Working with relative units》,书中对relative ...

    Airmusic 评论0 收藏0
  • 视口相关单位的应用 —— 别说你懂CSS相对单位

    摘要:还有视口相关单位,依赖浏览器的视口大小来定义长度的。如果你不熟悉视口相关单位的话,在这里简单介绍一下。笔记视口相关单位对于大多数浏览器还是一项比较新的特性,所以当你试图把这个特性和其他样式混搭时,有可能会有一些很奇怪的。 前段时间试译了Keith J.Grant的CSS好书《CSS in Depth》,其中的第二章《Working with relative units》,书中对rel...

    lbool 评论0 收藏0
  • 如何愉快使用em —— 别说你懂CSS相对单位

    摘要:相对单位的值会根据外部影响因素的变化而变化。很自然,相对单位使用起来会比较困难。在本章中,我将揭开相对单位的神秘面纱。重点来了,使用相对单位声明的值会由浏览器转化为一个绝对值,我们称之为计算值。 showImg(https://segmentfault.com/img/bVbdtsA); 前段时间试译了Keith J.Grant的CSS好书《CSS in Depth》,其中的第二章《W...

    gekylin 评论0 收藏0
  • CSS自定义属性 —— 别说你懂CSS相对单位

    摘要:前段时间试译了的好书,其中的第二章,书中对的讲解和举例可以说相当全面,看完之后发现自己并不太懂相对单位,也希望分享给大家,所以有了这个译文系列。 showImg(https://segmentfault.com/img/bVbdOMr?w=920&h=450); 前段时间试译了Keith J.Grant的CSS好书《CSS in Depth》,其中的第二章《Working with r...

    JinB 评论0 收藏0
  • 不知道层叠,别说你懂CSS

    摘要:知道存在是很有用的,这样当你在别人的代码中遇到它时,你就知道它是什么了。如上面所示的示例所示,元素选择器具有很低的特殊性。类选择器具有更高特殊性,所以将战胜元素选择器。个位在整个选择器中每包含一个元素选择器或伪元素就在该列中加分。 在实际的工作中,我们可能还有些疑惑,当有多个选择器作用在一个元素上时,哪个规则最终会应用到元素上?其实这是通过层叠机制来控制的,这也和样式继承(元素从其父元...

    izhuhaodev 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<