(自用面试题)px、em、rem的区别和使用场景分别是什么?

210 阅读1分钟

区别

  • px是固定的像素,一旦设置了就无法适应页面大小的改变而改变。
  • em和rem相对于px更具灵活性,都是相对长度单位,其长度不是固定的,更适用于响应式布局:em是相对于当前元素font-size的倍数,这样就会存在一个问题,进行任何元素设置,都需要知道当前元素的大小;而rem是相对于html元素的font-size的倍数,这样就意味着只需要在html元素确定一个参考值即可。

使用场景

对于只需要适配少部分移动设备且分辨率对页面影响不大的,使用px即可。
对于需要适配各种移动设备,使用rem,例如需要适配iPhone和iPad等分辨率差别比较大的设备。