CSS 中 em 和 rem 单位的区别解析
我要评论在CSS中设置任何元素的大小时，我们有两种选择。 第一个是绝对单位，另一个是相对单位。 绝对单位是固定的，与其他任何东西无关。 在任何情况下它们总是相同的。 它们涉及厘米、毫米、像素等。另一方面，相对单位是相对于其他东西的。 它可能是父元素的大小或主 HTML 的大小。 相对单位包括em、rem、vw、vh等。这些是可扩展的单位，有助于响应式设计。 我们中的许多人可能会对相对单位感到困惑，尤其是em和rem单位。 让我们分解这两者之间的区别。 基本上，rem 和 em 都是可缩放的相对大小单位，但是对于 em，单位是相对于其父元素的字体大小，而 rem 单位仅相对于 HTML 文档的根字体大小。 rem 中的“r”代表“根（root）”。
下面让我们详细了解它们。
1. em 单位：em 单位允许设置元素的字体大小相对于其父元素的字体大小。 当父元素的大小改变时，子元素的大小会自动改变。
注意：当字体大小属性上使用 em 单位时，大小是相对于父级的字体大小的。 当用于其他属性时，它与该元素本身的字体大小有关。 在这里，只有第一个声明采用父级的引用。
- .child 元素的 font-size（字体大小）为 40px (2*20px)。
- .child 的边距为 60px。 这是我们元素字体大小（1.5*40px）的 1.5 倍。
<!DOCTYPE html>
<html>
<head>
<title>Em 和 Rem - 脚本之家(jb51.net)</title>
</head>
<style>
.parent {
font-size: 20px;
}
.child-em {
font-size: 2em;
margin: 1.5em;
}
</style>
<body>
<div class="parent">
这是父元素
<div class="child-em">
这是 em 单位系统中的 Child
</div>
</div>
</body>
</html>
上面示例运行结果如下
2. rem 单位：rem 是基于根元素的 font-size 值，也就是<html>元素。 如果 <html> 元素没有指定字体大小，则使用浏览器默认值16px。 所以这里只考虑根的值，与父元素没有关系。
与 em 不同，这里的大小对于所有声明都是相对的，而不仅仅是第一个。 让我们通过前面的例子来理解这一点。
- .child 元素的 font-size（字体大小）为 60px (2*30px)。
- .child 的边距为 45px。 这是我们元素字体大小（1.5*30px）的 1.5 倍。
<!DOCTYPE html>
<html>
<head>
<title>Em vs Rem - 脚本之家(jb51.net)</title>
</head>
<style>
.html {
font-size: 30px;
}
.parent {
font-size: 20px;
}
.child-rem {
font-size: 2rem;
margin: 1.5rem;
}
</style>
<body>
<div class="parent">
这是父元素
<div class="child-rem">
这是 rem 单位系统中的 Child
</div>
</div>
</body>
</html>
上面示例运行结果如下
css em vs rem 运行结果
em 和 rem 单元之间的差异如下：
| 参数 | em | rem |
|---|---|---|
| 相对性 | em 是相对于其直接或最近的父元素 | REM的字体大小相对于HTML（root）字体大小 |
| 复合效果 | 可能导致复合效果 | 不会导致复合效果 |
希望大家能了解EM和REM单位之间的明显差异。 很容易记住，rem 中的r表示根，及相对于根（root）。em 是相对于父元素的。
在CSS中设置任何元素的大小时，我们有两种选择。 第一个是绝对单位，另一个是相对单位。 绝对单位是固定的，与其他任何东西无关。 在任何情况下它们总是相同的。 它们涉及厘米、毫米、像素等。另一方面，相对单位是相对于其他东西的。 它可能是父元素的大小或主 HTML 的大小。 相对单位包括em、rem、vw、vh等。这些是可扩展的单位，有助于响应式设计。 我们中的许多人可能会对相对单位感到困惑，尤其是em和rem单位。 让我们分解这两者之间的区别。 基本上，rem 和 em 都是可缩放的相对大小单位，但是对于 em，单位是相对于其父元素的字体大小，而 rem 单位仅相对于 HTML 文档的根字体大小。 rem 中的“r”代表“根（root）”。
下面让我们详细了解它们。
1. em 单位：em 单位允许设置元素的字体大小相对于其父元素的字体大小。 当父元素的大小改变时，子元素的大小会自动改变。
注意：当字体大小属性上使用 em 单位时，大小是相对于父级的字体大小的。 当用于其他属性时，它与该元素本身的字体大小有关。 在这里，只有第一个声明采用父级的引用。
- .child 元素的 font-size（字体大小）为 40px (2*20px)。
- .child 的边距为 60px。 这是我们元素字体大小（1.5*40px）的 1.5 倍。
<!DOCTYPE html>
<html>
<head>
<title>Em 和 Rem - 脚本之家(jb51.net)</title>
</head>
<style>
.parent {
font-size: 20px;
}
.child-em {
font-size: 2em;
margin: 1.5em;
}
</style>
<body>
<div >
这是父元素
<div >
这是 em 单位系统中的 Child
</div>
</div>
</body>
</html>
上面示例运行结果如下
2. rem 单位：rem 是基于根元素的 font-size 值，也就是<html>元素。 如果 <html> 元素没有指定字体大小，则使用浏览器默认值16px。 所以这里只考虑根的值，与父元素没有关系。
与 em 不同，这里的大小对于所有声明都是相对的，而不仅仅是第一个。 让我们通过前面的例子来理解这一点。
- .child 元素的 font-size（字体大小）为 60px (2*30px)。
- .child 的边距为 45px。 这是我们元素字体大小（1.5*30px）的 1.5 倍。
<!DOCTYPE html>
<html>
<head>
<title>Em vs Rem - 脚本之家(jb51.net)</title>
</head>
<style>
.html {
font-size: 30px;
}
.parent {
font-size: 20px;
}
.child-rem {
font-size: 2rem;
margin: 1.5rem;
}
</style>
<body>
<div class="parent">
这是父元素
<div class="child-rem">
这是 rem 单位系统中的 Child
</div>
</div>
</body>
</html>
上面示例运行结果如下
em 和 rem 单元之间的差异如下：
| 参数 | em | rem |
|---|---|---|
| 相对性 | em 是相对于其直接或最近的父元素 | REM的字体大小相对于HTML（root）字体大小 |
| 复合效果 | 可能导致复合效果 | 不会导致复合效果 |
希望大家能了解EM和REM单位之间的明显差异。 很容易记住，rem 中的r表示根，及相对于根（root）。em 是相对于父元素的。
到此这篇关于CSS 中 em 和 rem 单位的区别的文章就介绍到这了,更多相关css em 和 rem 区别内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！
相关文章
- 这篇文章主要介绍了CSS中单位px、rem、em、vh、vw之间的区别,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-05-25
CSS 中px、em、rem、%、vw、vh单位之间的区别详解
这篇文章主要介绍了CSS 中px、em、rem、%、vw、vh单位之间的区别，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2020-03-16
这篇文章主要介绍了postcss-pxtorem移动端适配的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学2019-12-03
这篇文章主要介绍了css基于媒体查询和 rem 的响应式布局实践的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-30
移动端使用 rem 单位时 css sprites 定位问题的解决
现在开发移动端 wap 页面，相信大家都会使用强大的 rem 单位去适配各种机型和屏幕；这篇文章主要介绍了移动端使用 rem 单位时 css sprites 定位问题的解决，小编觉得挺不错2018-06-20- 本文主要介绍了CSS中px em rem区别与使用。具有很好的参考价值。下面跟着小编一起来看下吧2017-03-27
- 相信每位前端工程师们都有这么一个体会，国内的设计师大都喜欢用px，而国外的网站大都喜欢用em和rem，那么三者有什么区别，又各自有什么优劣呢？下面这篇文章小编就来给大2017-02-24
- 国内的设计师大都喜欢用px，而国外的网站大都喜欢用em和rem，那么三者有什么区别呢？下面脚本之家小编给大家详细介绍下2016-05-06
最新评论