博客列表 >1. em,rem的特点是什么, 应用场景是什么?

1. em,rem的特点是什么, 应用场景是什么?

陈翔
陈翔原创
2022年10月25日 16:27:07832浏览

1. em

是一个相对单位。相对于当前对象内文本的font-size,如果当前文本的字体尺寸没有设置,则相对于浏览器的默认字体尺寸。即1em=16px

特点:

  • em的值并不是固定的
  • em会继承父元素的字体大小

2. rem

是一个相对单位。是相对HTML根元素。

特点:

  • rem为元素设定字体大小的时候,是相对于根元素进行计算的。
  • 当我们改变根元素下的字体大小时,下面的大小都会改变。
  • 通过rem既可以做到只修改根元素就可以成比例的调整所有字体,又可以避免字体大小逐层复合的连锁反应。

3. em和rem的区别

  • rem是相对于根元素进行计算,而em是相对于当前元素或父元素的字体大小。
  • rem不仅可以设置字体的大小,还支持元素宽、高等属性。
  • em是相对于当前元素或父元素进行换算,层级越深,换算越复杂。而rem是相对于根元素计算,避免层级关系。
  1. em和rem的区别一句话概括:em相对于父元素,rem相对于根元素(html)
  2. 对于只需要适配少部分手机设备,且分辨率对页面影响不大的,使用px或者em即可 。
  3. 对于需要适配各种移动设备,使用rem,例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备。
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议