em作为font-size的单位时，其代表父元素的字体大小，em作为其他属性单位时，代表自身字体大小——MDN
<div>
<p>Apple</p>
</div>
div{
font-size: 15px;
}
div > p{
font-size: 1.5em; /** 22.5 = 15 * 1.5 **/
height: 1.5em; /** 33.75 = 22.5 * 1.5 **/
line-height: 2;
/** 45 = 22.5 * 2
line-height 的值没有单位的时候本身就代表是自身字体的多少倍 **/
line-height: 2em; /** 45 = 22.5 * 2 **/
}
rem作用于非根元素时，相对于根元素字体大小；rem作用于根元素字体大小时，相对于其出初始字体大小——MDN
<html>
<body>
<div>
<p>Apple</p>
</div>
</body>
</html>
html{
font-size: 15px; /** px 作用于根 **/
/** font-size: 1rem; rem 作用于根会有一个不定的值;
chrome 会有一个默认值 推荐大小是16px; 用户可以调节**/
}
div{
font-size: 16px;
}
div > p {
font-size: 2rem; /**rem 作用于非根 30 = 15 * 2 **/
}
对 font-size 使用 rem;
对 border 使用 px;
对 padding; margin; width; height 等长度大小 使用 em
网友评论