px和em, rem 区别(转)

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 预处理工具可以使用默认值）

 

1 2 3

html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/} body {font-size: 1.4rem;/*1.4 × 10px = 14px */} h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}