px:
(1)任意浏览器的高度默认是16px,1em=16px;那么12.5px=0.75em;10px=0.625em;为了简化font-size的运算;需要在CSS的body中设置font-size为62.5%;这样,12px=1.2em,10px=1em;只需要将原来的px除以10替换就可以;
em
em值不固定,大小都是相对于父元素的大小;
rem
也是相对大小,但是相对的是跟元素(html)字体的大小;
************************************************************
(1)已测试 浏览器 safari,chrome,firefox
针对设计稿 计算rem
所有浏览器都一致默认保持着 16px 的默认字号 1em:16px ,但是 1:16 的比例不方便计算。在这里文档元素设置 font-size: 62.5%,可以很方便的利用十进制进行计算了,(CSS 预处理工具可以使用默认值)
123 | html { font-size : 62.5% ; /*10 ÷ 16 × 100% = 62.5%*/ } body { font-size : 1.4 rem; /*1.4 × 10px = 14px */ } h 1 { font-size : 2.4 rem; /*2.4 × 10px = 24px*/ } |