项目中常用的几种长度单位：px,em,rem,vh,vw的区别在哪里呢？

目前html页面中常用的长度单位基本就是： px , rem , 百分比 。其实还有一些不常用的，比如：em，vh,vw等。
下面简单的说一下他们的区别是什么：
px 是一个精准的像素单位，平时经常用感觉没什么好说的。

em 是一个相对比例单位，它是相对于父元素来说的，假如父元素的font-size为12px,本身使用2em的话 那么就是24px.

百分比（%） 顾名思义，就是按照比例方式来定大小，同样也是相对于父元素来说的。假如父元素的宽度是100px,本身使用60%的话就是60px。

rem 同样是一个相对单位，与前两个不同，它是相对于根html来说的。通常的使用方式是在html中设置一个基础的font-size值，然后内容中以这个值为底，把想要设置的像素值/html基础值得到的就是相对的rem值。比如：html{ font-size : 100px } ,我们要设置一个div的宽度为300，我们算一下300/100 = 3.那么我们只需要给div设置{ width : 3rem }就可以了

vh,vw 两者都是一起使用的，也是相对单位，但是这两个相对的是视图窗口，他们会把视图的宽度和高度分成100份，1wh或者1vh就是百分之1。如果不明白什么是视图窗口的话看下面的图应该就可以理解了。
目前的项目大多都是PC端或者移动端的h5会多一些。相对于PC端，目前我遇到的设计图给到的都是正文1200px左右，如果项目没有特殊需求的话正常使用px就可以了。移动端的话基本都是使用百分比和rem做自适应，但是在使用过程中对于屏幕高度的适配没有那么轻松，对于个别机型需要做另外的适配处理。有得人会问vh和vw既然是相对屏幕比例使用的，那不是就不需要做特殊的适配处理吗。确实如此，他们不需要做特殊的适配处理，但是这两个属性很多浏览器对他们不是很友好，不兼容。目前随着浏览器版本的逐渐迭代一些浏览器已经兼容vw和vh，但是距离广泛应用还是有小小的一段时间。

以上纯属个人理解，如果有问题或者哪里不对的话，还请留言批注，我会积极修改和处理。