css中的像素单位px、em、rem、vh、vw

/* 
px：绝对单位，页面按精确像素展示

em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。

rem：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持。

(另外需注意chrome强制最小字体为12号，即使设置成 10px 最终都会显示成 12px，当把html的font-size设置成10px,子节点rem的计算还是以12px为基准)。

移动端的标注稿一般是640px(iphone5)或者750px(iphone6/7/8),现在750px用的比较多一些，我们假设标注稿是750px的。这里的750px是指设备的实际尺寸，
也是UI标注稿的实际尺寸。而我们编码写的px是指css尺寸，是设备无关的尺寸，css尺寸和屏幕实际尺寸不是1比1的映射关系，而是取决于屏幕的像素密度。
比如iphoneX是3倍屏，iphone8是2倍屏，但是两个的屏幕css尺寸都是375px。而实际的设备尺寸，iphonex是1125px，iphone8是750px，我们编码过程中
只需要设置css尺寸，设备会自动帮我们映射实际的尺寸。我们按照标注稿写完页面之后，页面应该是可以在其他所有尺寸设备上正常自适应地显示的。css尺寸
和屏幕实际尺寸不是1比1的映射关系，而是取决于屏幕的像素密度。比如iphoneX是3倍屏，iphone8是2倍屏，但是两个的屏幕css尺寸都是375px。而实际的设
备尺寸，iphonex是1125px，iphone8是750px，我们编码过程中只需要设置css尺寸，设备会自动帮我们映射实际的尺寸。

*/
var calculate_size = function() {
    var BASE_FONT_SIZE = 100;
    var docEl = document.documentElement,
        clientWidth = docEl.clientWidth;
    docEl.style.fontSize = BASE_FONT_SIZE * (clientWidth / 750) + 'px';
};

/* 

vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%。
vh：viewpoint height，视窗高度，1vh等于视窗高度的1%。
vmin：vw和vh中较小的那个。
vmax：vw和vh中较大的那个。