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中較大的那個。