原始的 rem ,是这样计算的。rem 值 = px值 / 16(浏览器 font-size 默认值);
为了更好的使用 rem ,我们要设置文档根元素的 font-size 值(通常是 font-size = 100px)。
html{
font-size: 100px;
}
此时 rem 的计算方法是:px 值 / 100 (此时浏览器的根元素 font-size = 100px);
header{
width: 100%;
height: 80px;
}
/**********等价于************/
header{
width: 100%;
height: .8rem;
}
此时很有可能造成某些意想不到的问题:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
html{
font-size: 100px;
}
div{
width: 26px;
height: 26px;
background-color: yellow;
}
div img{
width: 26px;
height: 26px;
}
</style>
<body>
<div>
<img src="./xin.png" />
</div>
</body>
</html>
此时按正常的想法来就是,xin.png应该在div之内。
可是因为根元素的 font-size 值设为了 100px,xin.png 出现在了 div 之外。