px
像素px
是在写网页中最常用的单位,是相对于屏幕分辨率
而言
rem
相对于
html根元素
字体大小,如果没有设置根元素字体大小,则相对于默认大小16px
。可以理解为是html字体大小的多少倍
em
相对于
父元素
的字体大小。如当前父元素的字体尺寸未设置,则相对于浏览器的默认字体尺寸。可以理解为是父元素字体大小的多少倍
vw
vw是相对
视口
(viewport)的宽度而定的,长度等于视口宽度的1/100
vh
vh是相对
视口
(viewport)的高度而定的,长度等于视口高度的1/100
%
一般来说,是相对于
父元素
。
- 如果
position:absolute;
是相对于最近的加了定位的父元素- 如果
position:fixed;
是相对于viewport
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html{
font-size: 20px;
}
</style>
</head>
<body>
<script src="text.js"></script>
<p>我爱你</p>
<!-- 为设置的HTML字体大小 -->
<p style="font-size: 15px;">我爱你</p>
<!-- 自己设置的字体大小 -->
<p style="font-size:1.5rem;">我爱你</p>
<!-- 1.5rem=1.5*20px=30px -->
<p style="font-size: 1.5rem;">我<span style="font-size: 0.5em;">爱</span>你</p>
<!-- 0.5em=0.5*1.5rem=0.5*1.5*20px=15px -->
<p style="font-size: 2vw;">我爱你</p>
<p style="font-size: 2vh;">我爱你</p>
<p style="font-size: 50%;">我爱你</p>
<!-- 50%*20px=10px -->
</body>
</html>