在新媒体领域，尤其对前端自定义度较高的场景下，过去我们往往采用 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-