CSS3中一些新的單位早在去年春暖花開的時(shí)候就介紹了，參見：CSS長(zhǎng)度值及時(shí)間、頻率、角度單位。顯然，其中就提到了本文要感嘆的單位vw, vh，見下圖：
不過“我看見你”和“我觸碰你”是不一樣的。正好，機(jī)緣巧合，最近又與這兩個(gè)單位想見。大致琢磨了下，貌似vh這個(gè)單位可以實(shí)現(xiàn)我以前曾希望實(shí)現(xiàn)的的整體高度自適應(yīng)布局。想到這里，自己不由得小興奮了下，于是決定抽時(shí)間研究研究（雖然最近整iPad忙得屁股尿流~~）。
然而…… //zxx: 先賣個(gè)關(guān)子，一點(diǎn)一點(diǎn)嘮叨來(lái)~~
vw, vh這個(gè)可用來(lái)實(shí)現(xiàn)動(dòng)態(tài)布局的單位到底潛力如何？我不想直接吐露；請(qǐng)跟隨我的學(xué)習(xí)印記以及心理歷程一起去尋找答案吧~~
vw, vh, vmin(vm)這幾個(gè)視區(qū)相關(guān)單位，在2012年9月23號(hào)這天的兼容性為：Chrome 20+, IE9+ 以及Safari 6支持！
著名的CSS屬性可用性查詢網(wǎng)站caniuse給出了具體的兼容性表，點(diǎn)擊這里查看。
因此，本文后面要展示的N個(gè)demo，就沒有必要再低版本的IE瀏覽器上查看了~~
看到上圖黃色背景標(biāo)示的文字（“視窗”用“視區(qū)”一詞代替更恰當(dāng)）：
vw 相對(duì)于視窗的寬度：視窗寬度是100vw
我的第一反應(yīng)是：如果視區(qū)寬度是100vm, 則1vm是視區(qū)寬度的1/100, 也就是1%，類似于width: 1%. 但是，這里多次出現(xiàn)的“視窗”是納尼意思？
是瀏覽器內(nèi)部寬度大小(window.innerWidth)？是整個(gè)瀏覽器的寬度大小(window.outerWidth)？還是顯示器的寬度大小(screen.width)？我疑惑了！
每當(dāng)我疑惑的時(shí)候，我不是去找個(gè)“我覺得應(yīng)該是”的解釋，而是，新建個(gè)HTML頁(yè)面，像學(xué)生時(shí)代做生物實(shí)驗(yàn)般，多條件對(duì)比驗(yàn)證之。
為了便于其他同行的快速理解，測(cè)試的demo頁(yè)面我特意添加了交互，您可以狠狠地點(diǎn)擊這里：vw所謂視窗何意？demo
下圖為在IE9瀏覽器下默認(rèn)打開的效果：
顯然，這里的“視區(qū)”不可能是瀏覽器外部的寬度，計(jì)算值不匹配。
我們改變?yōu)g覽器的寬度，然后會(huì)看到：
至此，真相大白，“視區(qū)”所指為瀏覽器內(nèi)部的可視區(qū)域大小，即window.innerWidth/window.innerHeight大小，不包含任務(wù)欄標(biāo)題欄以及底部工具欄的瀏覽器區(qū)域大小。
修改vw對(duì)應(yīng)寬度值，圖片的尺寸大小可以進(jìn)一步驗(yàn)證上述結(jié)論：
注：一般情況下，Chrome瀏覽器瀏覽器內(nèi)外寬度是一樣的（因?yàn)闉g覽器左右無(wú)邊框）；加上瀏覽器大小變小時(shí)圖片尺寸不渲染的bug，因此，上demo最佳測(cè)試瀏覽器是IE9. // zxx: 不容易啊，IE系終于勃起了一把~~
視區(qū)相關(guān)單位vw, vh目前瀏覽器的支持算是比較弱的，因此，基本上不可能從現(xiàn)有的站點(diǎn)上找到相關(guān)的實(shí)際應(yīng)用。因此，我沒事的時(shí)候，腦子里就要盤算，該單位可用在何處呢？如果跟其他CSS3的屬性配合使用呢？
首先，很容易想到的是，寬度的自適應(yīng)布局，例如，兩欄1:3的寬度自適應(yīng)布局：
.sidebar { width: 25vw; float: left;}.main { width: 75vm; float: right;}但是，block水平元素本身具有自適應(yīng)性，加上這里的vm相比%并沒有什么優(yōu)勢(shì)。因此，vw單位用做寬度自適應(yīng)的布局，完全是吃力不討好得顯擺！
我們需要想的是其他一些只能vw, vh才能完成的應(yīng)用場(chǎng)景，這就是下面依次要展示的內(nèi)容~~
我們應(yīng)該都做過或見過這樣的交互：點(diǎn)擊下圖，彈框查看原始大圖；或者一屏內(nèi)（不能有滾動(dòng)條）大圖幻燈片瀏覽。這類需求讓人頭疼的地方之一就是原始大圖的尺寸限制問題——因?yàn)楹苡锌赡軋D片過大，尼瑪一屏顯示器區(qū)域不夠放，我們需要對(duì)其進(jìn)行縮放處理。例如：點(diǎn)擊這里查看（無(wú)論瀏覽器尺寸多小，圖片永遠(yuǎn)在一屏內(nèi)顯示）。
這類限制的實(shí)現(xiàn)，在當(dāng)下，需要獲得圖片的原始大小，以及瀏覽器內(nèi)部尺寸，算大小，算比例等，算是比較折騰的。
但是，vw, vh等單位本身就是瀏覽器視區(qū)大小相關(guān)單位，直接使用其做限制，豈不省了N多JS代碼？？
img { max-height: 90vh; }您可以狠狠地點(diǎn)擊這里：vw, vh與圖片的尺寸限制demo
例如，在暫未支持vh單位的FireFox 15瀏覽器下，點(diǎn)擊縮略圖，會(huì)看到高高的圖片完全溢出在屏幕之外（沒有被限制住 – 父容器沒有固定高度值，因此90%打醬油）：
連彈框一起被廢掉了
而支持vh單位的IE9瀏覽器呢~~當(dāng)當(dāng)當(dāng)當(dāng)，見下面截圖：
IE瀏覽器這回終于是“媳婦熬成婆”了，不容易，大家鼓掌……
相關(guān)圖片限制CSS如下：
.vw_vh_img { max-width: 90vw; max-height: 90vh;}注：demo頁(yè)面使用的彈框腳本就是之前“seajs使用示例及spm合并壓縮工具”一文中展示的最終腳本。
既然vw, vh是視區(qū)相關(guān)單位，我就想到是不是可以利用這個(gè)特性實(shí)現(xiàn)精確的視區(qū)大小覆蓋以及視區(qū)邊界的定位。
拿視區(qū)覆蓋舉例，如果我定義一個(gè)元素的高寬如下：
.element { width: 100vw; height: 100vh;}然后，再將其定位到視區(qū)左上角，豈不是可以實(shí)現(xiàn)視區(qū)的完整覆蓋；我立馬想到了彈出框的半透明覆蓋層。您可以狠狠地點(diǎn)擊這里：vw, vh視區(qū)完全覆蓋與純CSS彈框
建議在Chrome20+瀏覽器下查看效果（因?yàn)橛衦ange控件），點(diǎn)擊demo頁(yè)面按鈕，則半透明覆蓋層顯現(xiàn)了——完整覆蓋：
吐槽：
vw, vh單位的?。?？width: 100vw; height: 100vh;是一模一樣的。I am a little disappointed!vw, vh這兩個(gè)單位的介紹；而是展示了如果使用純CSS實(shí)現(xiàn)彈框的水平與垂直居中效果（IE6也是可以支持的，不過寫法需要變變~以后有機(jī)會(huì)詳細(xì)介紹）。拖動(dòng)range控件，可以看到圖片尺寸無(wú)論怎樣變，彈框總是居中的——純CSS實(shí)現(xiàn)，沒有JavaScript的計(jì)算與定位，您有興趣可以研究研究的~~正如上面所提到的，某些情況下，vw, vh所產(chǎn)生的效果與百分比%單位無(wú)異，尤其對(duì)于absolute/fixed定位屬性的元素，例如下面這個(gè)邊界定位的例子：
您可以狠狠地點(diǎn)擊這里：vh, vw等同百分比單位測(cè)試demo
//zxx: 我這里更多地是為了演示，其實(shí)要實(shí)現(xiàn)效果，最簡(jiǎn)單就是bottom:0.
關(guān)鍵CSS代碼如下：
{ height: 30px; margin-top: -30px; position: fixed; top: 100%; top: 100vh; left: 5%; left: 5vw; right: 5%; right: 5vw;}代碼含義很簡(jiǎn)單，支持vh, vw單位的使用之（因?yàn)樵诤竺媛暶鳎?；不支持的就是要百分?code>%單位。
然后各個(gè)瀏覽器測(cè)試發(fā)現(xiàn)，效果是一模一樣的（不支持position: fixed的IE6就當(dāng)它不存在吧），固定在視區(qū)底部，不隨滾動(dòng)條滾動(dòng)的空白工具欄：
說(shuō)實(shí)話，原本第一眼看到單位vw, vh的時(shí)候，覺得這個(gè)單位，說(shuō)不定會(huì)引發(fā)目前布局方式的大變革——水平方向流體布局??！
在制作高寬限制demo的時(shí)候，我還覺得，應(yīng)該是可以的。尼瑪，當(dāng)我做覆蓋以及定位這兩個(gè)demo的時(shí)候，心一下子涼下去了
vw, vh用在寬度自適應(yīng)上沒有價(jià)值——%可以實(shí)現(xiàn)之~~vw, vh用在absolute/fixed定位屬性元素上沒有價(jià)值——%可以實(shí)現(xiàn)之~~vw, vh這兩個(gè)視區(qū)相關(guān)動(dòng)態(tài)單位似乎應(yīng)用前景一下子黯淡了很多，潛力似乎也就那樣——想來(lái)想去，得出一個(gè)結(jié)論：vw, vh視區(qū)大小相關(guān)單位只適用于非定位元素的高度相關(guān)屬性上！ //zxx: 高度相關(guān)屬性如 – height/min-height/max-height/line-height/padding-top/padding-bottom等
于是，我下面所設(shè)想的應(yīng)用場(chǎng)景就會(huì)脫離寬度，脫離絕對(duì)定位元素，會(huì)是什么呢？？
我們可以把web頁(yè)面做得像Office文檔那樣，一屏正好一頁(yè)；拖動(dòng)滾動(dòng)條，我們可以一直往下看到最后一頁(yè)。
如果只借助CSS，這種效果絕對(duì)定位是實(shí)現(xiàn)不了的。因?yàn)槠鋞op值是動(dòng)態(tài)的(100%, 200%, 300% …)，必須借助JavaScript才能實(shí)現(xiàn)。而使用vh單位，既能捕獲瀏覽器可視區(qū)域高度，又不脫離文檔流，真是實(shí)現(xiàn)Office Word效果最佳利器！
您可以狠狠地點(diǎn)擊這里：vh單位模擬office word效果demo
建議使用Chrome20+瀏覽器查看demo，IE9瀏覽器下背景圖片的vh單位定位似乎有bug!
您會(huì)看到大致如下的效果（下圖為手動(dòng)改小瀏覽器高度后的效果，實(shí)際效果更佳）：
相關(guān)CSS代碼如下：
page { display: block; height: 98vh; width: 69.3vh; margin: 1vh auto; padding: 12vh; border: 1px solid #646464; box-shadow: 0 0 15px rgba(0,0,0,.75); box-sizing: border-box; background: url(office/bl.png) no-repeat 8vh 88vh, url(office/br.png) no-repeat 59vh 88vh, url(office/tl.png) no-repeat 8vh 8vh, url(office/tr.png) no-repeat 59vh 8vh; background-color: white; position: relative;}page:after { content: attr(data-page); color: graytext; font-size: 12px; text-align: center; bottom: 4vh; position: absolute; left: 10vh; right: 10vh;}HTML代碼如下：
<page></page><page></page><page></page>
JavaScript代碼為創(chuàng)建data-page屬性值，如下：
var elePages = document.querySelectorAll("page"), lenPage = elePages.length;for (var i=0; i<lenPage; i+=1) { elePages[i].setAttribute("data-page", "第 "+ (i+1) +" 頁(yè)，共 "+ lenPage +" 頁(yè)"); } 說(shuō)明：
21:29.7的比例制定，因此，所有單位值都是使用的vh單位。<page>元素還可以設(shè)置float:left或inline-block兩端/居中對(duì)齊等，讓一屏的水平方向顯示多個(gè)page頁(yè)面，就如實(shí)際的office word一樣。水平方向上的流體布局，正在琢磨折騰中，有不少技術(shù)難點(diǎn)，稍等幾天……
下圖為demo雛形截圖，其中，左上角第一個(gè)已經(jīng)成型的垂直布局顯然要調(diào)整成水平方向型的，具體如何操作，請(qǐng)等我再好好想想，您也可以一同思考！
補(bǔ)充于2016年8月8日
vw可用來(lái)解決滾動(dòng)條出現(xiàn)頁(yè)面晃動(dòng)的問題；vw的自動(dòng)縮放式網(wǎng)頁(yè)布局；視區(qū)相關(guān)單位除了文章多次提到的vw, vh，還有個(gè)vmin(vm – 據(jù)說(shuō)有的瀏覽器font-size: vm支持)，表示視區(qū)寬度或高度較小的那個(gè)。由于我實(shí)在想不出可以使用vmin的場(chǎng)景，因此，未具體介紹。
補(bǔ)充：
@Zearlin vm：…個(gè)人覺的很重要，特別是移動(dòng)平臺(tái)，可以實(shí)現(xiàn)Orientation后內(nèi)容自動(dòng)auto-fit的效果，如iBook閱讀PDF。
自從上次寫了關(guān)于CSS學(xué)習(xí)瓶頸的文章后，還是有不少人詢問我，說(shuō)自己確實(shí)覺得有問題，需要突破，不知該從何下手？
以我個(gè)人，以本文的內(nèi)容舉例：
照理講，視區(qū)相關(guān)單位vw, vh完全是個(gè)新東西，兼容性又不好，而且就是個(gè)單位，含義不難理解，應(yīng)該搗鼓不出什么值得學(xué)習(xí)的東西。實(shí)際上，就我個(gè)人而言，學(xué)到了很多東西，都有哪些呢？
vw, vh的精確含義vh實(shí)現(xiàn)水平流體布局的可能性多花點(diǎn)功夫，多些想法（感性認(rèn)知，如果這樣……或者那樣……），多實(shí)踐實(shí)踐（制作demo），多總結(jié)總結(jié)（寫作），再深入延伸延伸（水平方向流體布局 → 水平時(shí)間軸）；久而久之，水平自然大幅提升，瓶頸自然會(huì)突破。
對(duì)于技術(shù)文章，技術(shù)本身有時(shí)候是次要的；反而是一些想法，觀點(diǎn)會(huì)給人以更長(zhǎng)遠(yuǎn)以及持久的積極影響。
本文盡量從我自己，以第一人稱來(lái)敘述，從前到后，基本上就是自己平時(shí)學(xué)習(xí)新東西的套路。本文的內(nèi)容從技術(shù)層面講，確實(shí)是薄紙一張；但是，希望自己平時(shí)的學(xué)習(xí)套路，思考方式，實(shí)際做法等能夠?yàn)槌跞肭岸说男氯藗円恍﹩⑹尽?/p>
文章最后提到的，水平時(shí)間軸實(shí)現(xiàn)，如果最近實(shí)踐效果不錯(cuò)，我可能會(huì)新開一篇文章，重點(diǎn)介紹，因?yàn)槲矣X得應(yīng)該會(huì)比較有趣！
聯(lián)系客服
