关于EM的理解

Posted 2020-10-05 Ambition

 

任意浏览器的默认字体高度16px（16像素）。

所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em

也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

1、浏览器的默认字体大小是16px

2、如果元素自身没有设置字体大小，那么元素自身上的所有属性值如“boder、width、height、padding、margin、line-height”等值，我们都可以按下面的公式来计算

　　1 ÷ 父元素的font-size × 需要转换的像素值 = em
3.元素设置了字体大小，此元素的其他属性，如“border、width、height、padding、margin、line-height”计算就需要按照下面的公式来计算

　　1 ÷ 元素自身的font-size × 需要转换的像素值 = em

 个人觉得em是为了更好的维护网页和响应式而生的