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>
文章参考自点击这里
本文链接：https://my.lmcjl.com/post/2910.html
展开阅读全文
4 评论