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;
}
总结: