計育韜：為什么vw單位比px更適合新媒體設計？

原創贊收藏評論

舉報 2024-05-15

掃描,分享朋友圈

在新媒體領域，尤其對前端自定義度較高的場景下，過去我們往往采用 px 進行如尺寸、距離、偏移等布局屬性的控制，但是隨著移動終端尺寸比例的日益多樣化，人們越來越強調尺寸的自適應能力，以期在不同設備上能呈現相對最優的浮動展示。

由此，一些行業傳統的 layout ?? 前端呈現流程規則也日益被破除，使用 px 作為最終結果的對照已經顯得相對落后。新媒體崗位的從業者開始通過如百分數等方式重新梳理對前端設計的定位形式。也正因此，一些既往不太被重視的單位如 vw 也越來越多被人們提起并應用，以微信公眾號和微博生態的 SVG 交互設計為例，如今已經被廣泛應用在包括如「視差滑動」、「縱向滑動」等交互體系內，這里提供幾個來自 e2.cool 的套件參考

那么和 px 相比，vw 的具體價值體現在哪里？又有怎樣合適的應用場景？本期專題計育韜老師為大家做具體解析。

什么是 vw

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

而所謂的視窗一般指整個瀏覽器，所有無論你在 HTML 結構中的任何位置引用，它的比例尺都是相對整個瀏覽器而言的，相比之下百分數就會受制于父結構的尺寸而不能針對整個瀏覽器尺寸進行更直接的適配。

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

以微信公眾號圖文生態為例，由 JZ Creative Studio 測算的結果為參考，圖文的寬度為 92.43 vw（也被業內稱之為加菲爾德常數），也就是說當我們打開一篇公眾號圖文時，其兩側帶有必定的系統留白，中間可用于圖文編輯器的區域占 92.43%，如果選擇取整一般運營人會采用 90vw 進行具體的圖文交互設計創作。

vw 的應用意義

這樣一來，對于本身具備浮動性的 CSS 布局，或者采用精確數會必定導致機型適配異常的場景，vw 單位的意義就顯而易見了。

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

因而如果你在一些第三方工具中，遇到某些縱向參數帶默認值且可以調整，那么 160 這樣的數值往往就實際對應著 vw 了（如 e2.cool 黑科技 SVG 編輯器）中：

浮動性的大趨勢px 的必要性舍棄

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

擁抱 vw/vh，將會是新媒體設計的未來趨勢，在必要條件下放棄 px 的應用往往能讓你的設計在新媒體內有更好的適配表現。

-END-

本內容為作者獨立觀點，不代表數英立場。
本文禁止轉載，侵權必究。