em
根据父元素设置子元素的字体大小
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><div style = "font-size: 50px;">哈哈哈哈<!--这里的字体大小是100px--><div style = "font-size:2em;">呵呵呵呵</div></div></body></html>
测试结果如下：
rem
rem与em类似，但rem是根据根元素（即html）设置的字体大小的。一般来说 html 中设置的font-size为16px。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></head><body>嗯嗯嗯嗯<div style = "font-size: 32px;">哈哈哈哈<div style = "font-size:1rem;">呵呵呵呵</div></div></body></html>
测试结果如下：
vw与vh
vw（viewpoint width），视窗宽度，1vw=视窗宽度的1%
vh （viewpoint height），视窗高度，1vh=视窗高度的1%
<!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>div{width:50vw;height:50vh;background-color: deeppink;}</style></head><body><div><!-- 这里长和宽都占据一半 --></div></body></html>
文章参考自点击这里
