em 和 rem 总结

662 阅读1分钟

【前言】

在移动端开发页面的时候,免不了要适应各种不同步的屏幕,因此要使用css中的em和rem单位。

两者的主要区别如下:

1. em是相对于使用了em单位的元素字体大小的一个相对单位(平常说的相对于父元素完全是因为继承的原因).

2. rem是相对于根元素html字体大小的一个相对单位.

使用方法:

移动端一般给的设计稿的宽度是750px, 而浏览器一般有最小字体大小限制,因此,我们一般设置html字体大小为

html {
    font-size: calc((100vw / 750) * 100)
}

这样一来设计稿中的50px, 就是 50/100 = 0.5 rem 了。

em同理。

参考文献

caibaojian.com/rem-vs-em.h…

www.jianshu.com/p/a0ef1b925…