相对长度
相对长度单位指定了一个长度相对于另一个长度的属性。对于不同的设备相对长度更适用。
em
它是描述相对于应用在当前元素的字体尺寸，所以它也是相对长度单位。一般浏览器字体大小默认为16px，则2em == 32px；
em就相当于“倍”，比如设置当前的div的字体大小为1.5em，则当前的div的字体大小为：当前div继承的字体大小*1.5；
但是当div进行嵌套的时候，em始终是按照当前div继承的字体大小来缩放
案例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>em单位</title> <style> p { font-size: 16px;/*浏览器默认字体大小*/ line-height: 2em;/*段落高度为字体大小的两倍*/ background-color: bisque;/*背景颜色*/ } div { font-size: 30px;/*设置div盒子字体大小为30像素*/ border: 1px solid black;/*边框*/ } span { font-size: 0.5em; } </style> </head> <body> <p>这个段落的高度为: 2x16px = 32px。</p> <!--div嵌套span--> <div>div的字体大小设置为30px。 <span>div中的span元素font-size为0.5em, 计算结果后即为0.5x30 = 15px </span>。 </div> </body> </html> |
效果如图
相对长度
相对长度单位指定了一个长度相对于另一个长度的属性。对于不同的设备相对长度更适用。
rem
rem 是根 em（root em）的缩写，
rem作用于非根元素时，相对于根元素字体大小；rem作用于根元素字体大小时，相对于其出初始字体大小。
这里的r就是root的意思，意思是相对于根节点来进行缩放，当有嵌套关系的时候，嵌套关系的元素的字体大小始终按照根节点的字体大小进行缩放。
案例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>rem单位</title> <style> /* 作用于根元素，相对于原始大小（16px），所以html的font-size为32px*/ html {font-size: 2rem}
/* 作用于非根元素，相对于根元素字体大小，所以为64px */ p {font-size: 2rem} </style> </head> <body>
作用于根元素，相对于原始大小（16px），所以html的font-size为32px
<p>作用于非根元素，相对于根元素字体大小，所以为64px。</p>
</body> </html> |
效果如图：
相对长度
相对长度单位指定了一个长度相对于另一个长度的属性。对于不同的设备相对长度更适用。
vw
viewpoint width，视窗宽度，1vw=视窗宽度的1%
vw就是当前屏幕宽度的1%
height:100vh == height:100%;
案例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vw</title> <style> h1 { font-size: 20vw; } </style> </head> <body> <h1>Hello</h1> <p>重置浏览器查看查看 h1 的字体大小如何改变。</p> <p>viewpoint width，视窗宽度，1vw=视窗宽度的1% 。</p> <p>IE8 及其更早版本不支持该长度属性。</p> </body> </html> |
效果如图
相对长度
相对长度单位指定了一个长度相对于另一个长度的属性。对于不同的设备相对长度更适用。
vh
viewpoint height，视窗高度，1vh=视窗高度的1%
vh就是当前屏幕可见高度的1%，也就是说
height:100vh == height:100%;
案例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vh</title> <style> h1 { font-size: 20vh; } </style> </head> <body> <h1>Hello</h1> <p>重置浏览器查看查看 h1 的字体大小如何改变。</p> <p>viewpoint height，视窗高度，1vh=视窗高度的1% 。</p> <p>IE8 及其更早版本不支持该长度属性。</p> </body> </html> |
效果如图
绝对长度
绝对长度单位是一个固定的值，它反应一个真实的物理尺寸。绝对长度单位视输出介质而定，不依赖于环境（显示器、分辨率、操作系统等）。
px
像素 (1px = 1/96th of 1in)
像素或许被认为是最好的"设备像素"，而这种像素长度和你在显示器上看到的文字屏幕像素无关。px实际上是一个按角度度量的单位。
