前端开发常用单位

1.像素

• 什么是像素(Pixel)?
  在前端开发中视口的水平方向和垂直方向是由很多小方格组成的, 一个小方格就是一个像素
  例如div尺寸是100 x 100, 那么水平方向就占用100个小方格, 垂直方向就占用100个小方格

• 像素特点
  不会随着视口大小的变化而变化, 像素是一个固定的单位(绝对单位)

2.百分比

• 什么是百分比?
  百分比是前端开发中的一个动态单位, 永远都是以当前元素的父元素作为参考进行计算
  例如父元素宽高都是200px, 设置子元素宽高是50%, 那么子元素宽高就是100px

• 百分比特点

  • 子元素宽度是参考父元素宽度计算的
  • 子元素高度是参考父元素高度计算的
  • 子元素padding无论是水平还是垂直方向都是参考父元素宽度计算的
  • 子元素margin无论是水平还是垂直方向都是参考父元素宽度计算的
  • 不能用百分比设置元素的border

• 结论: 百分比是一个动态的单位, 会随着父元素宽高的变化而变化(相对单位)

3.em

• 什么是em?
  em是前端开发中的一个动态单位, 是一个相对于元素字体大小的单位
  例如font-size: 12px; ,那么1em就等于12px
  例如font-size: 14px; ,那么1em就等于14px

• em特点

  • 当前元素设置了字体大小, 那么就相对于当前元素的字体大小
  • 当前元素没有设置字体大小, 那么就相当于第一个设置字体大小的祖先元素的字体大小
  • 如果当前元素和所有祖先元素都没有设置大小, 那么就相当于浏览器默认的字体大小

• 结论: em是一个动态的单位, 会随着参考元素字体大小的变化而变化(相对单位)

4.rem

• 什么是rem?
  rem就是root em, 和em是前端开发中的一个动态单位,
  rem和em的区别在于, rem是一个相对于根元素(html)字体大小的单位
  例如 根元素(html) font-size: 12px; ,那么1em就等于12px

• rem特点

  • 除了根元素以外, 其它祖先元素的字体大小不会影响rem尺寸
  • 如果根元素设置了字体大小, 那么就相对于根元素的字体大小
  • 如果根元素没有设置字体大小, 那么就相对于浏览器默认的字体大小

• 结论: rem是一个动态的单位, 会随着根元素字体大小的变化而变化(相对单位)

5.vw/vh

• 什么是vw(Viewport Width)和vh(Viewport Height)?

  • vw和vh是前端开发中的一个动态单位, 是一个相对于网页视口的单位
  • 系统会将视口的宽度和高度分为100份,1vw就占用视口宽度的百分之一, 1vh就占用视口高度的百分之一
  • vw和vh和百分比不同的是, 百分比永远都是以父元素作为参考
    而vw和vh永远都是以视口作为参考

• 结论: vw/vh是一个动态的单位, 会随着视口大小的变化而变化(相对单位)

6.vmin/vmax

• 什么是vmin和vmax?
  vmin: vw和vh中较小的那个
  vmax: vw和vh中较大的那个
• 使用场景:一个长10，高5的方形，移动端旋转后，还是长>高。就要用到vmin/vmax。以保证移动开发中屏幕旋转之后尺寸不变