CSS单位 px，em, rem
2018-11-15 本文已影响0人
焦糖大瓜子
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
