rem em vh px各自代表的含义
rem:
其他元素相对于根元素,也就是html字体大小
计算方法:根元素字体大小乘rem的值—> 根元素的字体大小为16px,那么10rem就等同于10*16=160px
em:
当使用em的时候,em转为像素的大小取决于他们使用的字体大小。 此字体大小受从父元素继承过来的字体大小影响,除非显式重写与一个具体单位。
计算方法:父级元素字体大小为13px,10em将等同于130px,即13x10 = 130px
注意:
元素的width、height、padding、margin、用em的话是相对于该元素的font-size
<!DOCTYPE html>
<html lang='cn'>
<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>
.box{
font-size: 20px;
width: 5em;
height: 5em;
margin: 2em;
padding: 4em;
border: 1px solid red;
}
/*
得到了
width:100px
height:100px
margin:40px
padding:80px
*/
</style>
</head>
<body>
<div class="box">
<div class="child">em</div>
</div>
</body>
<script>
</script>
</html>
vh/vw:
全称是Viewport Height \ Viewport Width , 可视窗口的高度和宽度
注意:
处理宽度的时候使用
%
更合适,处理高度使用vh
更好
px:
相对长度单位。px是相对于显示器屏幕分辨率而言的,一般电脑的分辨率{1920 * 1024}等不同的分辨率
1920 * 1024:前者是屏幕宽度总共有1920个像素,后者则是高度为1024个像素