em和rem都是相对长度单位,不同的是em是相对于父级元素的字体尺寸,而rem只相对于HTML的根元素。
em计算:
一般浏览器的默认字体大小是16px,则默认情况下1em=16px,那么10px=10/16=0.625em,12px=12/16=0.75em,通常为了简化计算会在body中声明font-size=62.5%,即1em=10px,那么此时12px=1.2em。但需要注意的是,使用em计算时因为是相对父级元素,计算时要注意当前元素父级元素的字体大小是多少,比如当父级元素的字体大小是1em(10px)时,当前元素中12px=1.2em,当前元素的子元素要设置成12px就是1em而不是1.2em。
rem计算:
rem的计算要简单很多,因为它只是相对于根元素,计算方法同em类似,如默认情况下12px=0.75rem。
px、em、rem单位转换工具:http://pxtoem.com/