css 个人接触一段时间，自认为对一些 confusing 的地方比较清楚，但是上周当有同事问道 rem 和 em 具体的区别，以及他们都适合应用在什么场景下，自己也回答含糊不清，所以搜集一些资料从新回顾一下这部分知识。

首先我们要明确 em 和 rem 概念

他们都是相对单位，说道相对，那么就是需要相对对象。

em 的相对对象是其父级对象的 font-size 值也就是父级 dom 的 font-size * em的值

rem 这里多一个 r ，其他相同也就是 r + em，这个 r 指明了这里相对对象只能是 root 也就是 html的 font-size，下面通过实例进行讲解

标题

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate est, ut delectus obcaecati dolores vero necessitatibus suscipit debitis saepe facilis?

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate est, ut delectus obcaecati dolores vero necessitatibus suscipit debitis saepe facilis?

先写一个 html 文件，dom 结构很简单，只是为了说明 em 和 rem 这两个单位。

@import "variables/variable.scss";

.wrapper{

display: flex;

}

css 为了方便我用了 sass 来写，然后编译成为 css 来使用，没有什么特别的，如果大家不了解 sass 留言我可以分享 sass 的用法，如果您作为一个前端开发人员，还不知道有 sass 那么多少有些落伍了。

.col-em h1 {

font-size: 2.5em; }

.col-rem h1 {

font-size: 2.5rem; }

我们分别为 col-em 和 col-rem 指定了 font-size 这里值得说明一下，col-em h1 父级还没有指定 font-size 他会一直向上追溯到 html 节点默认的 font-size 16px。

下面是 sass 代码，结构很清晰吧

.col-em{

h1{

font-size: 2.5em;

}

font-size: 1em;

}

001.JPG

运行代码看效果

所以看上去没有什么区别，因为他们都相对目标都是 16px, 都是 2.5 x 2.5em

rem

然后我们修改 col-em > h1 的父级 col-em 的 font-size 的值为 20px 这样由于 em 的相对对象是其父级 font-size

.col-em {

font-size: 20px; }

.col-em h1 {

font-size: 2.5em; }

.col-em p {

font-size: 1em; }

002.JPG

所以在 em 这一侧 em 文字大小都增加了。

.wrapper {

display: flex;

font-size: 20px; }

.col-em h1 {

font-size: 2.5em; }

.col-em p {

font-size: 1em; }

如果我们将 .wrapper 中的 font-size 的值调大，会发现 em 随之改变，而 rem 并没有变化。

002.JPG

html中rem和em,CSS 中的 rem 和 em 的区别（1）相关推荐

css中ul位置移动,css中ul怎么定位
css中ul怎么定位 css中所有的元素默认都是static定位,要改变ul的定位方式,我们只需要指定元素的css position属性即可. 关于定位的几种方式1.static定位(普通流定位) - ...
css中文本指什么,CSS中的文本属性
本文总结一下CSS中关于文字的相关属性,最后给出实例. CSS基础文字属性文字的基础属性主要包括:字体.颜色和文本.除去颜色color的属性外,字体和文本的相关属性可以权威参考: CSS 文本属性( ...
html中透明度怎么写,css中控制透明度
CSS中如何控制层的透明度? 在CSS样式中设置背景的透明度,下面一个具体的实例.把类为box的层设为透明. .box{width:300px; height:200px; margin:0 auto ...
css 中的zoom,对CSS中zoom属性的总结
在css中,zoom属性作用是设置或检索对象的缩放比例.对应的脚本特性为zoom.虽然很多人都知道,但是任然有人不知道zoom的具体的用法,或者没有深究过,下面就把zoom的用法总结一下: 1.CSS ...
html中定义动画anima,css中animation怎么用
css中animation怎么用 animation比较类似于 flash 中的逐帧动画,逐帧动画就像电影的播放一样,可以让很多其它CSS属性产生动画效果,比如color, background-co ...
css中文本指什么,CSS中的文本属性学习指南
文本缩进 text-indent 值:长度值(正.负均可) 示例:p {text-indent:3em;} 字符间距 letter-spacing 值:任何长度值(正.负值均可). 示例:p {let ...
css中style怎么用,css中style标签的使用方法
css中style标签的使用方法发布时间:2020-07-01 09:49:22 来源:亿速云阅读:141 作者:Leah 这篇文章将为大家详细讲解有关css中style标签的使用方法,文章内容质 ...
css中auto啥意思,css中auto什么意思？
auto是自适应的意思,auto是很多尺寸值的默认值,也就是由浏览器自动计算.块级元素中margin.border.padding以及content宽度之和构成父元素width.使用auto属性后,父 ...
html中的float含义,css中float是什么意思？
float是CSS中的浮动属性,当元素设置了float属性就会脱离标准流,浮动在其他元素上,它会根据属性值向左或者向右浮动. CSS中的float属性是一个频繁用到的属性,对于初学者来说,如果没有理解 ...
html中display属性含义,css中display是什么意思？
display是CSS中的一个常用属性,可用于规定元素应该生成的框的类型,在网页开发中经常需要用到.下面本篇文章就来给大家介绍一下CSS display属性,希望对大家有所帮助. display属性规 ...

html中rem和em,CSS 中的 rem 和 em 的区别（1）

标题

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet.

html中rem和em,CSS 中的 rem 和 em 的区别（1）相关推荐

最新文章

热门文章