版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/hlx20080808/article/details/88997165
rem的值并不是固定的
rem是相对根节点html发生变化的（和父节点无关）
实际开发中一般默认的把html根节点设置为10px（62.5%）或者是100px，方便后续计算;
<head>
<meta charset="UTF-8">
<title>视口标签</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>
<style type="text/css">
html{
font-size: 1rem; /*默认字体是16px*/
}
div{
font-size: 1.5rem;
}
p{
font-size: 1.5rem;
}
span{
font-size: 1.5rem;
}
</style>
</head>
<body>
<div >html根=>div 第一层 16*1.5=24px
<p> div=>p 第二层 16*1.5=24px
<span>div=>p=>span 第三层16*1.5=24px</span>
</p>
</div>
</body>
</html>效果：
注意：必须设置在HMTL上哦！否则无效哦！
/*如果1rem等于10px，那计算起来就方便了*/
html{
font-size: 62.5%; /*默认字体是16px*/
}
div{
font-size:3rem;
}
总结：