px、em、rem、%、vw、vh、vm 这些单位的区别

  • px

px就是像素,也是我们现在经常使用的基本单位,比如常常听到的电脑像素是1024x768的,表示的是水平方向是1024个像素点,垂直方向是768个像素点。

  • em

em参考物是父元素的font-size,默认字体大小是16px,所以1em不是固定值,因为它会继承父元素的字体大小

  • rem

rem参考物是相对于根元素,我们在使用时可以在根元素设置一个参考值即可,相对于em使用,减少很大运算工作量,例:html大小为10px,12rem就是120px

  • %

% 是相对于父元素的大小设定的比率,position:absolute;的元素是相对于已经定位的父元素,position:fixed;的元素是相对可视窗口

  • vw(viewpoint Width)

vm相对于视口的宽度。视口被均分为100单位

h1 {
    font-size: 8vw;
}
  • vh(viewpoint Height)

1vh 等于1/100的视口高度。

  • vm(vmin)

vmin 是当前 vm 和 vh 中较小的一个值,也就是说,是可视区域较小的一边的1/100的长度;

参考

https://juejin.im/post/5ce59380f265da1b5d578268

wayofway all right reserved,powered by GitbookLast updated: 2021-02-24 09:22:33

results matching ""

    No results matching ""