CSS学习----px、rpx、em、rem、%、vw、vh、vm的区别

px

像素，pixel的缩写。
作用：px设置固定的布局或者元素大小

rpx

rpx (responsive pixel)
  微信小程序解决自适应屏幕尺寸的尺寸单位
微信小程序规定屏幕的宽度为750rpx。
解释：将屏幕的宽度分为750份，1份就是1 rpx

em

参考物：父元素的font-size
  如果自身定义了font-size，按自身计算。整个页面内1 em不是固定的值。
特点：
1.em的值不是固定的
2.em继承父级元素的字体大小

rem

参照物：根元素html
  只需在根元素确定参考值，可以设计HTML为大小为10px，则设置1.2rem表示12px。
优点:只需设置根目录的大小就可以将整个页面成比例的调好。

%

一般来说，相对于父元素

1. 普通定位元素就是相对于父元素
2. position: absolute的元素相对于已定位的父元素
3. position: fixed的元素相对于Viewport（视口）。

vw

1. CSS3新单位
2. Viewport Width的简写，指可视窗口的宽度。
3. 视口的宽度为1200px的话，100vw等于1200px，10vw等于120ox，以此类推
4. 假设，浏览器宽度为1200px，1vw = 1200px / 100 = 12px

vh

1. CSS3新单位
2. Viewport Height的简写，指视口的高度。
3. 视口的高度为1200px的话，100vh等于1200px，10vh等于120ox，以此类推
4. 假设，浏览器宽度为900px，1vw = 900px / 100 = 9px

vm

1. CSS3新单位
2. 相对于视口的宽度或高度较小的那个。
3. 其中最小的那个被均分100份的大小就是1 vm
4. 假设，浏览器高度为800px，宽度为1000px，则1vm = min(800, 1000)px / 100 = 8px
5. 兼容性较差，不建议使用

补充内容

Viewport 视口

pc端，Viewport指的是浏览器的可视区域
移动端，涉及3个视口：Layout viewport（布局视口）、Visual viewport（视觉视口）、Ideal viewport（理想视口）。Viewport指的是其中的Layout Viewport。

根据CSS3规范，视口单位包括以下4个

1. vw: 1 vw等于视口宽度的1%
2. vh: 1 vh等于视口高度的1%
3. vmin: 选取vw和vh中最小的那个
4. vmax: 选取vw和vh中最大的那个