CSS单位问题

复习一个开发中常用的单位问题

px,rpx,vh,vd等单位的解析和区别

• px，较常见的单位，1px为CSS内的一个独立像素，也称为逻辑像素

• pt 物理像素，为一个长度单位

• em ,浏览器默认情况下，1em=16px ；为设置字体的大小，默认继承父元素的大小

• rem由于em存在对于父元素的继承问题，rem继承根元素的字体尺寸大小，如文本大小设为 font-size: 10px，则 1rem = 10px；

  另外有利于实现响应式布局，rem布局中大小跟随根元素变化，所以可以根据根元素改变font-size

• rpx 微信小程序引入的尺寸单位，任意屏幕的宽为750rpx，小程序会自学适配

• vw和vh。CSS3中新出单位，屏幕宽度为100vw，高100vh

• 使用小Tips：利用calc（）函数实现不同单位中的只能转换,
  例如：height: calc(100vh - 80rpx)
  设置高度为屏幕高度减去80rpx；