1. em
是一个相对单位。相对于当前对象内文本的font-size,如果当前文本的字体尺寸没有设置,则相对于浏览器的默认字体尺寸。即1em=16px
特点:
- em的值并不是固定的
- em会继承父元素的字体大小
2. rem
是一个相对单位。是相对HTML根元素。
特点:
- rem为元素设定字体大小的时候,是相对于根元素进行计算的。
- 当我们改变根元素下的字体大小时,下面的大小都会改变。
- 通过rem既可以做到只修改根元素就可以成比例的调整所有字体,又可以避免字体大小逐层复合的连锁反应。
3. em和rem的区别
- rem是相对于根元素进行计算,而em是相对于当前元素或父元素的字体大小。
- rem不仅可以设置字体的大小,还支持元素宽、高等属性。
- em是相对于当前元素或父元素进行换算,层级越深,换算越复杂。而rem是相对于根元素计算,避免层级关系。
- em和rem的区别一句话概括:em相对于父元素,rem相对于根元素(html)
- 对于只需要适配少部分手机设备,且分辨率对页面影响不大的,使用px或者em即可 。
- 对于需要适配各种移动设备,使用rem,例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。