px、rpx、em、rem、vw、vh 各种像素单位的区别

  • px：px就是 pixel的缩写，意味像素。px就是一张图片最小的一个点，一张位图就是无数个这样的点构成的，是web开发中最常用的像素单位。
  • rpx：由微信小程序官方推出的新单位，适用于移动端的 uni-app或者微信小程序的开发。可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。在设计时可以将1px约等于2rpx。

image.png

  • em：相对单位，参照物是父元素的 font-size字体大小，具有继承的特点。如果自身定义了 font-size属性那么就会按照自身来计算，都没有设置的话，就会按照当前所有浏览器或者设备的默认文字大小来计算调整。一般来说浏览器的默认字体大小为16px，一个完整的页面内，可能每个模块的 em默认值都不想同。
  • rem：css3中推出的新单位。相对于根元素（html）设置的 font-size属性进行调整，而不会像 em那样依赖于父元素的字体大小而造成页面文字大小不相同的混乱局面。
  • vw：同样是css3中推出的新单位，是 viewpoint width的缩写，意为视窗宽度。视窗宽度1vw等于是视窗宽度的1%。也就是说，如果当前开发浏览器或者设备的宽度为1280px，那么1vw就等于12.8px。在开发设计的过程中，100vw才能真正占据当前屏幕宽度的100%。
  • vh：和vw同理，是css3中推出的新单位，是 viewpoint height的缩写，意为视窗高度。视窗高度1vh等于是视窗高度的1%。计算及使用都与vw相同，这里就不在赘述了。

vw 和 vh 衍生的 vmin 和 vmax分别指 视窗宽度和高度较小的那个 和 视窗宽度和高度较大的那个。具体的，如浏览器窗口高度小于宽度时，1vmin将等价于1vh，1vmax等价于1vw。