<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>px-em-rem</title>
<style type="text/css">
html{
font-size: 15px;
}
body{
font-size: 20px;
}
.px{
width: 100px;
height: 100px;
background: yellow;
}
.em{
width: 100em; /*1em = 16px; 参照是父元素*/
height: 100em;
background: red;
}
.rem{
width: 100rem; /*1rem = 16px; 参照是根元素*/
height: 100rem;
background: blue;
/*0.4*font-size=40px; font-size=100px;
0.4*font-size=50px; font-size=125px;
* */
}
.father{
font-size: 12px;
}
</style>
</head>
<body>
<div class="px"></div>
<div class="father">
<div class="em"></div>
</div>
<div class="rem"></div>
</body>
</html>
