长度单位 em rem vw vh
2021-10-08 本文已影响0人
洪锦一
em
官方解释：CSS1 长度单位 em，相对于当前对象内文本的字体尺寸
我的解释：1em=父标签的font-size
em是根据父标签的font-size变化的 ,如果父标签没有设置 font-size 一直往上找
比如：2em就等于24px
<div style="font-size:12px">
<p style="font-size:2em"></p>
</div>
Demo.html
<!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>Document</title>
<style>
body {font-size: 12px;}
.div1 {font-size: 12px;}
.size1 {font-size: 1em;}
.size2 {font-size: 2em;}
.size3 {font-size: 3em;}
.div2 {width: 66em;height: 300px;background-color: #efefef;}
</style>
</head
<body>
<div class="div1">
<p class="size1">我是p标签</p>
<p class="size2">我是p标签</p>
<p class="size3">我是p标签</p>
</div>
<div class="div2">
<p>我是div2</p>
</div>
</body>
</html>
rem
官方解释：CSS3 长度单位 rem ，相对于根元素(即html元素)font-size计算值的倍数
我的解释：1rem=html的font-size 默认是16px
rem是根据html的font-size变化的
<!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>Document</title>
<style>
html {
font-size: 30px;
}
div{width: 30rem; height: 6rem;font-size: 100px; background-color: rgb(192, 190, 190);}
div p{font-size: 2rem;}
</style>
</head>
<body>
<span>html字体大小</span>
<div>
<p>测试rem</p>
</div>
</body>
</html>
vw
相对于视口的宽度或高度中较小的那个。其中最小的那个被均分为100单位的vm
h1{font-size:8vw;}
如果视口的宽度是200mm，那么上述代码中h1元素的字号将为16mm，即(8x200)/100
vh
相对于视口的高度。视口被均分为100单位的vh
h1{font-size:8vh;}
如果视口的高度是200mm，那么上述代码中h1元素的字号将为16mm，即(8x200)/100
