css中相关单位（px,%,em,rem,vw,vh,vm）的区别

随着web时代发展和html5的出现，前端对网页的要求越来越高了，网页设计单位是涉及到我们布局的效果，使用不同的单位会对最终的结果，会有不同的表现和效果。

现在大部分的项目需求都是需要响应式设计，需要去适配各种设备，比如：电脑，手机，平板。如果单位不合适，那么有可能在这个设备布局效果是正常的，另一设备布局效果错乱，就会得不到很好的适配，所以我们需要选择合适的单位来适配各种设备。

接下来简单的介绍一下相关单位以及他们各自的特地拿和他们之间的区别：

1、px 单位

px就是pixel的缩写，意为像素。px就是设备或者图片最小的一个点，比如常常听到的电脑像素是1024x768的，表示的是水平方向是1024个像素点，垂直方向是768个像素点。

也是我们网页中常用的基本单位，通过px可以设置固定像素，固定的字体大小等，无论设备怎么改变，设置的值都不会改变。

缺点：没有弹性，不能随设备的变化而变化，达不到适应所有设备的效果

2、% 单位

一般是相对于父元素的宽高的大小来显示的，比如父元素width：1000px，那么子元素设置width：80% = 800px

但是也要值得注意：

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

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

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

3、em单位

参考物是父元素的font-size，具有继承的特点。如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。
特点是

     1. em的值并不是固定的；

     2. em会继承父级元素的字体大小。

4、rem单位

rem是相对于根元素html，这样就意味着，我们只需要在根元素确定一个参考值，可以设计HTML为大小为12px，到时设置1rem就是12px.以此类推。

优点是，只需要设置根目录的大小就可以把整个页面的成比例的调好。

5、vw单位

vw是viewpoint width的缩写，意味着视窗（可视窗口）的宽高的，比如可是窗口宽度为375px，那么1vw = 3.75px

6、vh单位

vh是viewpoint height的缩写，意味着视窗的高度，比如可视窗口的高度为600px，那么1vh = 6px

7、vm单位

css3新单位，相对于视口的宽度或高度中较小的那个的倍数，例如浏览器的height=900px，width=1200px,那么1vm = 9px

但是这个浏览器的兼容不是很好

以上的话也是我个人对css中常见的单位的一些理解，具体区别，看他们自己的优缺点就能总结出来了，一般响应式布局的话我使用 vw + rem 的形式布局，比较完美。