px 像素,固定单位,页面缩放不改变大小
em 值不固定,会继承父级元素的字体大小,代表倍数
用法技巧:
1.通常浏览器默认样式16px,若子元素设定为1.2,结果为19.2px,出现非整像素数的误差。
2.将body的font-size设置为62.5%,即10px,那么其余子元素设定,如1.3em即 13px。可以避免非整像素数。
// html
<body>10px <span>16px</span></body>
// css
body {font-size: 62.5%}
span {font-size: 1.6em;} // span渲染结果为16px
rem 值不固定,是基于根原始<html>的,代表倍数
rem values are relative to the root html element, not the parent element
html { font-size: 62.5%; }
span { font-size: 1.6rem; } // span 渲染结果为16px
网友评论