CSS 笔记 (1)- 相对单位 em 和 rem

原创 乘风逐月 随笔 CSS知识记录 143阅读 2018-07-17 17:03:29 举报

一、em

1.元素字体大小font-size的单位是px

em 是常见的相对单位,它的基准值是当前元素的字体大小。在 CSS 中 1em 等于当前元素的字体大小,使用 em 声明的值,会被浏览器渲染为一个绝对值。例如:

上例中,如果 div 没有 box 的类名,它的高会是32px,有了这个类名,它的高就是24px。

2.元素字体大小font-size的单位是em

当元素的 font-size 单位是 em 时,这时 em 的基准值是元素继承自父元素的字体大小。例如:

上例中,p 的字体大小是 2 乘以它继承自父元素的字体大小。父元素的字体大小是 1.2 乘以它继承自 body 的字体大小。那么, box 的字体大小是 1.216px=19.2px,p 的字体大小是 19.2px2 = 38.4px。

3.在一个元素内用em同时声明font-size和其他属性值

对同一个元素的 font-size 和其他属性同时用 em 为单位声明值时,此时浏览器会先计算出 font-size 的值,然后基于这个值再去计算其他属性的值。例如:

上例中 p 的字体大小是 19.2px2 = 38.4px,此时其他属性值的 1em 就等于 38.4px,高则是 38.4px2=76.8px。

4.问题

当使用em声明多层嵌套的元素字体大小时,要注意 em 的基准值来自父元素的字体大小。如果子元素的字体大小都用0.85em,那里面的元素字体大小是逐级递减的。例如:

5.获得指定px大小的em的值

如果已经知道以 px 为单位的基础字号,想用 em 为单位表示,计算公式就是: 目标 em 的值 = 目标像素值/父元素像素值。例如,想要10px的字体大小,父元素的字体大小是12px,那10p 的字体大小用em表示就是 10/12 = 0.8333em。想要15px的,就是 15/12 = 1.25em。

二、rem

rem 与根元素有关联,不依赖当前元素。

1.rem作用于根元素

rem作用于根元素字体大小时,相对于其出初始字体大小。大多数浏览器的默认字体大小是16px,所以初始字体大小就是16px。

那么 html 的字体大小就是32px。

2.rem作用于非根元素

rem作用于非根元素时,相对于根元素字体大小。在文档中的任何地方使用 1.2rem,浏览器计算的绝对值都是相等的。例如:

上例中p的高度就是32px,p的字体大小和box的字体大小一样都是32px。如果上例中 rem 都变成 em,结果就变了p的字体继承box,box继承body。那么box的字体大小是32px,p 的字体大小是64px,p的高度是128px。

3.使用 rem 布局

使用rem布局可以实现等比缩放,需要设置页面元素rem单位的属性,然后改变html元素的字体大小。可以在js中设置,也可以在css中使用媒体查询。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复