px, em, rem, vw之间的区别

PX

px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。

PX特色

1. IE没法调整那些使用px做为单位的字体大小
1. 国外的大部分网站可以调整的缘由在于其使用了em或rem做为字体单位；
1. Firefox可以调整px和em，rem，可是96%以上的中国网民使用IE浏览器(或内核)。能够考虑不说

EM

em是相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

EM特色

1. em的值并非固定的；
2. em会继承父级元素的字体大小。

注意：任意浏览器的默认字体高都是16px。全部未经调整的浏览器都符合: 1em=16px。
那么12px=0.75em,10px=0.625em。为了简化font-size的换算，须要在css中
的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px,
这样12px=1.2em, 10px=1em, 也就是说只须要将你的原来的px数值除以10，而后换上
em做为单位就好了。

因此咱们在写CSS的时候，须要注意两点：

1. body选择器中声明Font-size=62.5%；
2. 将你的原来的px数值除以10，而后换上em做为单位；
3. 从新计算那些被放大的字体的em数值。避免字体大小的重复声明。
也就是避免1.2 * 1.2= 1.44的现象。好比说你在#content中声明了字体大小为1.2em，那么在
声明p的字体大小时就只能是1em，而不是1.2em, 由于此em非彼em，它因继承#content的字
体高而变为了1em=12px。

REM

rem是CSS3新增的一个相对单位（root em，根em），这个单位引发了普遍关注。

这个单位与em有什么区别呢？区别在于使用rem为元素设定字体大小时，仍然是相对大小，
但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优势于一身，经过它既
能够作到只修改根元素就成比例地调整全部字体大小，又能够避免字体大小逐层复合的连锁
反应。目前，除了IE8及更早版本外，全部浏览器均已支持rem。

vh、vw

vh、vw方案即将视觉视口宽度 window.innerWidth和视觉视口高度 window.innerHeight 等分为 100 份。
vh和vw方案和rem相似也是至关麻烦须要作单位转化，并且px转换成vw不必定能彻底整除，所以有必定的像素差。
不过在工程化的今天，webpack解析css 的时候用postcss-loader 有个postcss-px-to-viewport能自动实现px到vw的转化

{
    loader: 'postcss-loader',
    options: {
    	plugins: ()=>[
        	require('autoprefixer')({
        		browsers: ['last 5 versions']
        	}),
        	require('postcss-px-to-viewport')({
        		viewportWidth: 375, //视口宽度（数字)
        		viewportHeight: 1334, //视口高度（数字）
        		unitPrecision: 3, //设置的保留小数位数（数字）
        		viewportUnit: 'vw', //设置要转换的单位（字符串）
        		selectorBlackList: ['.ignore', '.hairlines'], //不须要进行转换的类名（数组）
                minPixelValue: 1, //设置要替换的最小像素值（数字）
                mediaQuery: false //容许在媒体查询中转换px（true/false）
        	})
    	]
}