在新媒體領(lǐng)域，尤其對(duì)前端自定義度較高的場(chǎng)景下，過去我們往往采用 px 進(jìn)行如尺寸、距離、偏移等布局屬性的控制，但是隨著移動(dòng)終端尺寸比例的日益多樣化，人們?cè)絹?lái)越強(qiáng)調(diào)尺寸的自適應(yīng)能力，以期在不同設(shè)備上能呈現(xiàn)相對(duì)最優(yōu)的浮動(dòng)展示。

由此，一些行業(yè)傳統(tǒng)的 layout ?? 前端呈現(xiàn)流程規(guī)則也日益被破除，使用 px 作為最終結(jié)果的對(duì)照已經(jīng)顯得相對(duì)落后。新媒體崗位的從業(yè)者開始通過如百分?jǐn)?shù)等方式重新梳理對(duì)前端設(shè)計(jì)的定位形式。

也正因此，一些既往不太被重視的單位如 vw 也越來(lái)越多被人們提起并應(yīng)用，以微信公眾號(hào)和微博生態(tài)的 SVG 交互設(shè)計(jì)為例，如今已經(jīng)被廣泛應(yīng)用在包括如「視差滑動(dòng)」、「縱向滑動(dòng)」等交互體系內(nèi)，這里提供幾個(gè)來(lái)自?e2.cool?的套件參考：

那么和 px 相比，vw 的具體價(jià)值體現(xiàn)在哪里？又有怎樣合適的應(yīng)用場(chǎng)景？本期專題計(jì)育韜老師為大家做具體解析。

什么是 vw

首先，vw 單位是 Viewport Width 的縮寫，意為視窗寬度。

而所謂的視窗一般指整個(gè)瀏覽器，所有無(wú)論你在 HTML 結(jié)構(gòu)中的任何位置引用，它的比例尺都是相對(duì)整個(gè)瀏覽器而言的，相比之下百分?jǐn)?shù)就會(huì)受制于父結(jié)構(gòu)的尺寸而不能針對(duì)整個(gè)瀏覽器尺寸進(jìn)行更直接的適配。

不管在什么終端屏幕條件下， vw 都是把屏幕分為平均的 100 等份，那么對(duì)于整個(gè)屏幕而言，1vw 和 1% 就是完全相同的——比如我們假定移動(dòng)端視窗寬度為 350px，那么 1vw 就相當(dāng)于 3.5px。

以微信公眾號(hào)圖文生態(tài)為例，由 JZ Creative Studio 測(cè)算的結(jié)果為參考，圖文的寬度為 92.43 vw（也被業(yè)內(nèi)稱之為加菲爾德常數(shù)），也就是說當(dāng)我們打開一篇公眾號(hào)圖文時(shí)，其兩側(cè)帶有必定的系統(tǒng)留白，中間可用于圖文編輯器的區(qū)域占 92.43%，如果選擇取整一般運(yùn)營(yíng)人會(huì)采用 90vw 進(jìn)行具體的圖文交互設(shè)計(jì)創(chuàng)作。

vw 的應(yīng)用意義

這樣一來(lái)，對(duì)于本身具備浮動(dòng)性的 CSS 布局，或者采用精確數(shù)會(huì)必定導(dǎo)致機(jī)型適配異常的場(chǎng)景，vw 單位的意義就顯而易見了。

除了剛才我們提到的加菲爾德常數(shù)（圖文寬度 92.43vw），還有一些業(yè)內(nèi)約定俗成并常態(tài)化應(yīng)用的數(shù)據(jù)，包括對(duì)一屏視窗的高度通常采用 160 vw，它之于大多數(shù)主流機(jī)型手機(jī)都能基本達(dá)到覆蓋接近一屏的程度。而 vh 由于部分品牌機(jī)型存在識(shí)別故障，因此暫時(shí)沒有在業(yè)內(nèi)廣泛流傳，當(dāng)然從純前端開發(fā)角度來(lái)看，也是另一個(gè)非常不錯(cuò)的對(duì)縱向坐標(biāo)進(jìn)行定位的單位。

因而如果你在一些第三方工具中，遇到某些縱向參數(shù)帶默認(rèn)值且可以調(diào)整，那么 160 這樣的數(shù)值往往就實(shí)際對(duì)應(yīng)著 vw 了（如?e2.cool?黑科技 SVG 編輯器）中：

浮動(dòng)性的大趨勢(shì)和 px 的必要性舍棄

計(jì)育韜老師注意到部分 Global 品牌包括傳統(tǒng)奢侈品，仍然在遵循一些比較陳舊的設(shè)計(jì)與交付流程形式，并常常采用 px 作為全部的計(jì)量單位，因而在實(shí)際排版過程中會(huì)出現(xiàn)大量不符合當(dāng)代新媒體產(chǎn)品技術(shù)框架的問題。應(yīng)當(dāng)理解，現(xiàn)在用戶手中絕大多數(shù)終端機(jī)型都是尺寸各不相同的，強(qiáng)行以 px 作為對(duì)照反而容易導(dǎo)致最終成品的適配性低下。

擁抱 vw/vh，將會(huì)是新媒體設(shè)計(jì)的未來(lái)趨勢(shì)，在必要條件下放棄 px 的應(yīng)用往往能讓你的設(shè)計(jì)在新媒體內(nèi)有更好的適配表現(xiàn)。

-END-