css中单位em和rem之间的区别

对于em和rem的区别一句话概括:em相对于父元素,rem相对于根元素。

在 CSS 中,em 是非常有用的单位,因为它可以自动适应用户所使用的字体。

em是自适应当前使用字体大小的,1em等于当前字体大小,2em等于两倍字体大小(font-size)
1.子元素字体大小的em是相对于父元素字体大小
2.元素的width/height/padding/margin用em的话是相对于该元素的font-size
举个例子:

父亲

儿子 孙子

div 是父级元素 p是子级元素 span是孙子元素

div{
font-size:60px;
/* // 相当于宽度为:600px /
width:10em;
height:10em;
border: 1px solid red;
}
p{
/
// 相当于0.560 = 30px /
font-size:0.5em ;
/
// 相当于300px /
width:10em;
height:10em;
border: 1px solid black;
}
span{
/
// 相当于0.5
30 = 15px /
font-size:0.5em;
width: 10em;
height: 10em;
border: 1px solid gold;
display: block;
}
css中单位em和rem之间的区别
必须知道谷歌浏览器的最小字体是12px; ,也就是1em默认为12px,如果最外层的父元素直接把font-size设为1.5em,那么该元素的字体大小为18px(12
1.5)。

rem单位适用于做移动端页面,REM表示“Root EM”,字面上指的是根元素的em大小。
我们知道在Web文档的上下文中,根元素就是你的html元素。如果没有重置,html默认font-size:16px。
rem是全部的长度都相对于根元素,根元素是谁?元素。
通常做法是给html元素设置一个字体大小,然后其他元素的长度单位就为rem。
html {
font-size: 10px;
}
div {
font-size: 4rem; /* 40px /
width: 30rem; /
300px */
height: 30rem;
border: solid 1px black;
}
做响应式网站的时候我推荐使用rem,因为它只是相对于根元素变化,而em相对于太多了父元素了。有点难计算了

随便提下px:px是固定的像素,它不会随着页面变化而改变大小的。