前端程序員需要知道的7種新型的CSS長(zhǎng)度單位
來源 |?http://www.fly63.com/article/detial/10000?type=1
rem
body {font-size: 14px;}div {font-size: 1.2em; // calculated at 14px * 1.2, or 16.8px}
<body><div>Test<div>Test<div>Testdiv>div>div>body>
雖然在某些地方這正是我們想要的，但是通常情況下我們還是希望就依賴單一的相對(duì)度量單位就好。這時(shí)候嘛，我們就可以使用?rem?了。 ‘r’是“root”的縮寫，意思就是1rem等于根元素的字體大?。淮蟛糠智闆r下，根元素就是元素了。
html {font-size: 14px;}div {font-size: 1.2rem;}
這樣在上面的那三個(gè)嵌套的div娃們的字體大小都是 1.2*14px = 16.8px 了。
適用于網(wǎng)格布局
Rems 不僅僅只是在設(shè)置字體大小上很方便。再炒個(gè)栗子，你可以用基于html根元素字體大小的rem作為整個(gè)網(wǎng)格布局或者UI庫(kù)的大小單位，然后在其他特定的地方用em單位。
這樣將會(huì)給你帶來更多的字體大小和伸縮的可控性
.container {width: 70rem; // 70 * 14px = 980px}
概念上來說，這個(gè)方法的思想就是讓你的界面根據(jù)你的內(nèi)容進(jìn)行縮放。但是，這樣做并不是對(duì)所有的情況都有意義。
vh and vw
響應(yīng)式Web設(shè)計(jì)離不開百分比。但是，CSS百分比并不是所有的問題的最佳解決方案。CSS的寬度是相對(duì)于包含它的最近的父元素的寬度的。
但是如果你就想用視口（viewpoint）的寬度或者高度，而不是父元素的，那該腫么辦？ 這就是?vh?和?vw?單位為我們提供的。
1vh?等于1/100的視口高度。栗子：瀏覽器高度900px, 1?vh?= 900px/100 = 9 px。同理，如果視口寬度未750， 1vw?= 750px/100 = 7.5 px。
可以想象到的，他們有很多很多的用途。比如，我們用很簡(jiǎn)單的方法只用一行CSS代碼就實(shí)現(xiàn)同屏幕等高的框。
.slide {height: 100vh;}
假設(shè)你要來一個(gè)和屏幕同寬的標(biāo)題，你只要設(shè)置這個(gè)標(biāo)題的font-size的單位為vm，那標(biāo)題的字體大小就會(huì)自動(dòng)根據(jù)瀏覽器的寬度進(jìn)行縮放，以達(dá)到字體和viewport大小同步的效果，有木有？！
vmin and vmax
vh和?vm?依據(jù)于視口的高度和寬度，相對(duì)的，vmin?和?vmax則關(guān)于視口高度和寬度兩者的最小或者最大值。
比如，瀏覽器的寬度設(shè)置為1100px，高度設(shè)置為700px，?1vmin?= 1px，?1vmax?= 11px。如果寬度設(shè)置為800px,高度設(shè)置為1080px,?1vmin就等于8px,?1vmax則未10.8px。
那么問題來了，我們應(yīng)該在什么場(chǎng)景下使用這兩個(gè)單位呢？
假設(shè)有一個(gè)元素，你需要讓它始終在屏幕上可見。
只要對(duì)其高度和寬度使用vmin單位，并賦予其低于100的值就可以做到了。再來個(gè)栗子，可以這樣定義一個(gè)至少有兩個(gè)邊觸摸到屏幕的方形：
.box {height: 100vmin;width: 100vmin;}
如果你要讓這個(gè)方形框框始終鋪滿整個(gè)視口的可見區(qū)域（四邊始終觸摸到屏幕的四邊）
.box {height: 100vmax;width: 100vmax;}
ex?and?ch
x-height; the height of the lower case x
這些單位有很多用途，大部分用于版式的微調(diào)。比方說，sup?元素（上角文字標(biāo)），可以通過position:relative;bottom: 1ex;實(shí)現(xiàn) 。類似的方法，你可以實(shí)現(xiàn)一個(gè)下角文字標(biāo)。瀏覽器默認(rèn)的方式是利用
上標(biāo)和下標(biāo)特定垂直對(duì)齊規(guī)則，但是如果你想更細(xì)粒度更精確得控制，你可以像下面這樣做：
sup {position: relative;bottom: 1ex;}sub {position: relative;bottom: -1ex;}
結(jié)論
持續(xù)關(guān)注不斷發(fā)展壯大的CSS技術(shù)無疑是很重要的，這樣你才能掌握你所持有的工具的全部技能。說不定將來你遇到的某個(gè)特殊的問題就需要使用這些復(fù)雜的單位來解決。
