css中px等单位的区别

 

• • 只需要适配少部分移动设备,切分辨率对页面影响不大,可用px
  • 需要适配各种分辨率变化较大的设备,使用em或者rem,一般来说rem更佳
  • 微信小程序直接用rpx
  • vw,wh,vmax,vmin用的不是很多,需要在特殊情况下使用

1. px
   1. 相对单位,相对于设备的像素,固定布局
   2. 没有弹性
2. em
   1. 相对的是父元素的字体大小,具有继承的特点,父元素如果没有设置那么默认的就算16px
   2. 1em = 16px   1px = 0.0625em    这就很难计算 可以设置字体大小font-size = 62.5% 这样em就是10像素  也就是1px=0.1em
   3. 由于em继承父级属性,所以同一个页面中的em不一定相等
3.  rem
   1. 相对的是html根元素的字体大小( html{ font-size:1rem } )
4.  vw
   1. view width 可视窗口的宽度
   2. 1vw = 可视窗口宽度的1%
5.  wh
   1. view height 可视窗口的高度
   2. 1wh = 可视窗口高度的1%
6.  vmin 
   1. wh和vw中较小的值
7. vmax 
   1. wh和vw中较大的值
8. rpx
   1. 微信小程序单位
   2. 微信小程序规定屏幕宽度为750rpx
   3. 750rpx = 375px 1px = 2rpx