javascript之原型和原型鏈
因此，作為網頁設計師和前端開發人員，我們別無選擇，必須熟悉我們手上的工具，做到知己知彼，這樣才能百戰不殆。
這就意味著有那麽些個特別的貨，雖然平常都不怎麽會用上，但是一旦某個地方需要它們了，他們就真的是特麽得合適不過來了呢。
今兒，我就準備向大夥兒介紹一些你們之前可能很少見過CSS家夥們。他們每個都是度量的單位，類似pixel 和 em 這樣的，但是很有可能你之前從來就沒聽過這些家夥們！就讓我們一起來交個朋友吧~
1、rem
我們首先介紹下和我們熟悉的很相似的貨。em 被定義為相對於當前對象內文本的字體大小。炒個栗子，如果你給body小哥設置了font-size字體大小，那麽body小哥的任何子元素的1em就是等於body設置的font-size。
<body> <div class="test">
Test</div></body>
body { font-size: 14px;}div { font-size: 1.2em;
// calculated at 14px
* 1.2, or 16.8px}
你看，這裏div這娃的字體大小是1.2em。解釋來說，就是他從body爹爹那裏繼承的字體大小（這裏是14px）的1.2倍，結果就是16.8px。
但是，如果你用em一層一層級聯得定義嵌套元素的字體大小又會花生什麽事情呢？在下面這一小段代碼裏我們應用了和上面一樣一樣的CSS，每一個div都從它上一級父元素繼承了字體大小，並且逐漸得增加。
<body> <div> Test
<!-- 14 * 1.2 = 16.8px --> <div>Test
<!-- 16.8 * 1.2 = 20.16px --> <div> Test
<!-- 20.16 * 1.2 = 24.192px --> </div> </div> </div>
</body>
雖然在某些地方這正是我們想要的，但是通常情況下我們還是希望就依賴單一的相對度量單位就好。這時候嘛，我們就可以使用 rem 了。 ‘r’是“root”的縮寫，意思就是1rem等於根元素的字體大小；大部分情況下，根元素就是<html>元素了。
html {
font-size: 14px;}div {
font-size: 1.2rem;}
這樣在上面的那三個嵌套的div娃們的字體大小都是 1.2*14px = 16.8px 了。
2、適用於網格布局
Rems 不僅僅只是在設置字體大小上很方便。再炒個栗子，你可以用基於html根元素字體大小的rem作為整個網格布局或者UI庫的大小單位，然後在其他特定的地方用em單位。這樣將會給你帶來更多的字體大小和伸縮的可控性，
.container { width: 70rem;
// 70 * 14px = 980px}
概念上來說，這個方法的思想就是讓你的界面根據你的內容進行縮放。但是，這樣做並不是對所有的情況都有意義。
3、vh and vw
響應式Web設計離不開百分比。但是，CSS百分比並不是所有的問題的最佳解決方案。CSS的寬度是相對於包含它的最近的父元素的寬度的。但是如果你就想用視口（viewpoint）的寬度或者高度，而不是父元素的，那該腫麽辦？ 這就是 vh 和 vw 單位為我們提供的。
1vh 等於1/100的視口高度。栗子：瀏覽器高度900px, 1 vh = 900px/100 = 9 px。同理，如果視口寬度未750， 1vw = 750px/100 = 7.5 px。
可以想象到的，他們有很多很多的用途。比如，我們用很簡單的方法只用一行CSS代碼就實現同屏幕等高的框。
.slide {
height: 100vh;}
假設你要來一個和屏幕同寬的標題，你只要設置這個標題的font-size的單位為vm，那標題的字體大小就會自動根據瀏覽器的寬度進行縮放，以達到字體和viewport大小同步的效果，有木有？！
4、vmin and vmax
vh和 vm 依據於視口的高度和寬度，相對的，vmin 和 vmax則關於視口高度和寬度兩者的最小或者最大值。比如，瀏覽器的寬度設置為1100px，高度設置為700px， 1vmin = 1px， 1vmax = 11px。
如果寬度設置為800px,高度設置為1080px, 1vmin就等於8px, 1vmax則未10.8px。
那麽問題來了，我們應該在什麽場景下使用這兩個單位呢？
假設有一個元素，你需要讓它始終在屏幕上可見。
只要對其高度和寬度使用vmin單位，並賦予其低於100的值就可以做到了。再來個栗子，可以這樣定義一個至少有兩個邊觸摸到屏幕的方形：
.box {
height: 100vmin;
width: 100vmin;}
需要web前端學習資料的同學，加群434623999
javascript之原型和原型鏈