浅析 em 和 rem

news/2024/12/27 4:23:13/

em 和 rem 都是相对长度单位
em 是相对于父级元素的font-size 大写来定义自身的大小
rem 是相对于根节点（html{}, body{}, :root{}）font-size来定义大小

Talk is cheap, show me the code !(空谈无用，上代码)

em

<html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>em demo</title><meta name="description" content=""><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href=""><style>* {margin: 0;padding: 0;}/*1. 浏览器默认的字体大小是 16px,所以 1em = 16px2. 使用 em 时如果嵌套的子元素过多，而且子元素会继承父元素的 font-size 属性，使得的计算起来比较繁琐, 先检查自身有没有 font-size属性，如果有则使用自身的，3. 如果没有，则查看父级元素的 font-size值4. 因此不推荐使用 em,替代方案是 rem (root element)*/.div {width: 20em;height: 20em;font-size: 20px;background-color: skyblue;margin: 0 auto;margin-top: 15px;}.div1 {/*如果自身没有 font-size这个属性，则使用父级的font-size属性值*/width: 15em; height: 15em;background-color: lightblue;}   .div2 {/*如果自身有 font-size这个属性，则使用自身的属性值*/font-size: 10px;width: 10em;height: 10em;background-color: lightgreen;}.div3 {/*div3 自身没有 font-size属性，则使用父级 div2 的 font-size值*/width: 8em;height: 8em;background-color: lightpink;}</style></head><body><div class="div">我是 div<div class="div1">我是 div1<div class="div2">我是 div2<div class="div3">我是 div3</div></div></div></div></body>
</html>

rem

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>rem demo</title><style>* {margin: 0;padding: 0;}/* :root {font-size: 30px;}html {font-size: 50px;} *//*1. 浏览器默认的字体大小是 16px,所以 1rem = 16px2. :root{} 就等同于 html{},总之，是根元素3. 因此不推荐使用 em,替代方案是 rem (root element)4. 1rem = 16px*/html {font-size: 20px;}.div {width: 20rem;height: 20rem;background-color: lightblue;}.div1 {width: 15rem;height: 15rem;background-color: lightgreen;}.div2 {width: 160px;height: 160px;font-size: 16px;background-color: lightgray;}</style>
</head>
<body><div class="div">我是 div 元素</div><div class="div1">我是 div1 元素</div><div class="div2">我是 div2 元素</div>
</body>
</html>