rem是基于什么原理进行适配的?

Posted by CodingWithAlice on May 7, 2024

rem是基于什么原理进行适配的

​ css中常见的几个单位 px、em、rem,px是固定像素 - 绝对长度单位(还有pc、pts、in…),无法因为页面大小改变;

​ rem 和 em 都是 相对长度单位(还有vw、vh、%…)

详解:

🆚 em相对于父元素

  1. 子元素 font-size 设置em单位,是 相对于父元素 的的字体大小
  2. 当前元素的 width/height/padding/margin 设置em单位,是相对于 当前元素 的字体大小
  • 补充:chrome 显示的最小字体是12px,低于12px的字体大小会被默认为12px

🆚 rem相对于根节点

根节点是 root,也就是 <html> 元素

用 rem 做响应式时,在 媒体查询中直接改变 <html> 元素的 font-size 就可以实现