px,em,rem,%，vmin，vmax,vh ,vw

传统的项目开发中，我们只会用到px、%、em这几个单位，它可以适用于大部分的项目开发，并且拥有比较良好的兼容性。但是你知道吗？从css3开始，浏览器对逻辑单位的支持又提升到了另外一个境界，增加了rem、vh、vw、vm等一些新的长度单位，我们可以利用这些新的单位开发出比较良好的响应式页面

px

px就是pixel的缩写，意为像素。px就是一张图片最小的一个点，一张位图就是千千万万的这样的点构成的，比如常常听到的电脑像素是1920x1080的，表示的是水平方向是1920个像素点，垂直方向是1080个像素点。

我们可以通过ps，直观感受一下像素点

rem

css3新单位，相对于根元素html（网页）的font-size ，这个单位对于开发一个响应式的页面非常有帮助，

我们只需要调整根元素的font-size，整个系统的页面都会跟着变化

em

参考物是父元素的font-size，也就是说，如果两个元素的父元素的font-size不一样，即使两个元素都是1em，但是大小依然不一致。但是存在即为合理。

对于我们开发组件，建议使用em单位。 

如果使用px,适配性就非常差；

如果使用rem，这个相对单位，你不知道使用者使用的是什么单位，而且根元素的font-size你也不清楚，这样适配也是有问题的。

而em则是比较好的，因为它在小范围内是相对单位，这样使用者就能够很方便的进行组件的适配

%

一般宽泛的讲是相对于父元素，但是并不是十分准确。

1、对于普通定位元素就是我们理解的父元素

2、对于position: absolute;的元素是相对于已定位的父元素

3、对于position: fixed;的元素是相对于ViewPort（可视窗口）

vw/vh

整个两个单位是相对与视窗的，就是将视窗分成100份，然后水平的一份是1vw；垂直的一份是1vh

Vmax/vmin

css3新单位，相对于视口的宽度或高度中较小(较大)的那个。其中最小（最大）的那个被均分为100单位的vm

举个例子：浏览器高度900px，宽度1200px，取最小的浏览器高度，1 vmin = 900px/100 = 9 px。

做移动页面开发时，如果使用 vw、wh 设置字体大小（比如 5vw），在竖屏和横屏状态下显示的字体大小是不一样的。

由于 vmin 和 vmax 是当前较小的 vw 和 vh 和当前较大的 vw 和 vh。这里就可以用到 vmin 和 vmax。使得文字大小在横竖屏下保持一致。

总结：

用vw，vh设定的大小只和视窗大小有关，所以用来开发多种屏幕设备的应用用这个单位还是挺合适的。

em 对于组件开发比较合适，局部范围的使用

rem对于全局控制非常有用

%可以满足大部分自适应设计的需求

对于定制的页面，我们还是会直接使用px单位

更多学习视频学习资料请参考：B站搜索“我们一起学前端”