rem、em、vw、vh 的区别？

rem、em、vw、vh

  • em：Relative to the parent element 相对于父元素
  • rem： Relative to the root element (HTML tag) 相对于根元素
  • %: Relative to the parent element
  • VW: Relative to the viewport’s width
  • VH: Relative to the viewport’s height
  • 1vw = 1% of viewport width
  • 1vh = 1% of viewport height
  • 1vmin = 1vw or 1vh, whichever is smaller
  • 1vmax = 1vw or 1vh, whichever is larger

em

em在 font-size 中使用是相对于父元素的字体大小，在其他属性中使用是相对于自身的字体大小，如 width
ex字符“x”的高度
ch数字“0”的宽度
rem根元素的字体大小
lh元素的 line-height
vw视窗宽度的 1%
vh视窗高度的 1%
vmin视窗较小尺寸的 1%
vmax视图大尺寸的 1%

See the Pen css – em 的实际效果 by hjoker (@hjoker) on CodePen.