px 转 vw Pixels ↔ Viewport width 免费 在线 安全

为什么要把 px 换算成 vw

设计师发来一份宽 1440 px 的设计稿,主视觉标题是 96 px,区块间隔是 72 px。在真实的网络上,这个页面会在手机上以 360 px、平板上以 820 px、大显示器上以 2560 px 被看到,而设计师希望标题在每一种屏幕上都保持与屏幕的比例。为此而生的单位是视口宽度 vw,从设计稿到达那里的办法就是把 px 换算成 vw:取像素值,除以设计稿绘制时的宽度,再乘以一百。1440 px 画布上的 96 px 标题是 6.67 vw,从此它始终是屏幕宽度的百分之 6.67,不管屏幕多宽。

这是视口单位的承诺,也是它的风险。Rem 和 em 从字号出发,而浏览器把字号设为一个合理的默认值。Vw 根本没有默认值:视口宽度就是读者的窗口有多宽,当他们旋转手机或拖动窗口时它就变。所以换算器不隐藏答案所依赖的那个数。设计稿的宽度放在一个输入框里,从 1440 px 开始,您可以更改它以匹配您的设计稿。

算术在您的浏览器中进行,不会上传任何内容。下面您会找到公式、换算保留什么和不能保留什么、视口单位在哪里有帮助又在哪里有害、纯 vw 文字造成的无障碍问题、修复它的 clamp 技术,以及把像素设计稿变成流式样式表的方法。

公式与宽度

vw 等于 px 除以宽度,再乘以一百

公式是 vw = px ÷ 宽度 × 100。设计宽度为 1440 px 时,144 px 的尺寸变成 10 vw,72 px 变成 5 vw,24 px 变成 1.667 vw。页面在结果旁显示宽度,如 144 px = 10 vw (1440 px),让您看到假定了什么。一 vw 是视口宽度的百分之一,所以 1000 px 宽的窗口里 1 vw 等于 10 px。

1440 从哪里来

这里的 1440 px 是设计稿常用的绘制宽度,是一种习惯而不是标准。有些团队以 1280 绘制,许多以 1920,而移动端设计以 375 或 390。没有正确答案,只有您的设计文件所用的宽度。输入您自己的:换算的好坏取决于您给它的宽度。

使用设计稿自己的宽度

如果设计稿是以 1920 px 绘制的,就输入 1920,同样的 96 px 标题就变成 5 vw。如果您用错了宽度把 px 换算成 vw,页面在一种屏幕尺寸下看起来对,而在所有其他尺寸下都错,当您不知道该去找时,这是个令人费解的缺陷。

换算保留什么、不能保留什么

它保留屏幕的份额

一 vw 是视口宽度的百分之一,所以用 vw 写的尺寸随窗口增大和缩小,而不是原地不动。结果是该像素值在您的设计稿中所占屏幕的份额,而在浏览器中,元素在每个宽度下都保持这个份额。

它不能给出默认值

与 rem 不同,vw 没有默认值。没人另行说明时,浏览器给根字号 16 px,所以 rem 页面可以从一个真实的数出发;视口宽度就是读者的窗口有多宽,当他们转动手机时它会变。输入框中的宽度是您设计稿的宽度,答案对该宽度的屏幕是对的,在其他地方按比例成立。

取整

除以 1440 对大多数尺寸产生很长的小数。像 6.6667 vw 这样的值放在样式表里没问题,但您可以取整为 6.67 或 6.7 而没有任何可见变化。小数点后保留两三位;更多是噪音。

视口单位在哪里有帮助

主视觉标题和大号展示字体

必须在每台设备上占据屏幕给定份额的标题,是经典的用法。在手机的宽度上,固定 96 px 的标题会溢出;用 vw 它随屏幕缩小,并留在一行之内。

通栏区块

落地页大区块之间的间距,常常在随屏幕缩放时最好看,这样页面在小笔记本和宽显示器上都保持它的节奏。以 vw 计的间隔就做到了这一点。

必须保持形状的图稿

以 vw 设定大小的主图、插画和装饰形状,保持与窗口的比例,所以构图不会随屏幕变化而散架。

有界限的流式字体

与 clamp() 结合,vw 给出在最小值和最大值之间平滑增长的字体。这是现代样式表对标题使用的技术,下面会讲到。

视口单位在哪里有害

纯 vw 的正文

只用 vw 设定大小的文字,在读者于浏览器中缩放页面时没有响应,因为缩放改变的是窗口的像素大小,而 vw 的尺寸保持它的份额。依赖缩放的人,往往因为视力不好,面对的是无法放大的文字。无障碍指南要求文字可以调整大小,而纯 vw 的尺寸通不过这项测试。

极小与极大的两端

在 320 px 宽时,6.67 vw 的标题是 21 px,可能太小。在 2560 px 宽时它是 171 px,大得惊人。没有限制,在 1440 看起来对的比例,在两端可能荒谬。

滚动条

在桌面浏览器上,用于 vw 的视口宽度包括垂直滚动条的宽度。因此设为 100vw 的方框,在页面滚动时会比可见区域稍宽,并可能出现水平滚动条。在用 vw 构建全宽布局之前,请了解这一点。

clamp 技术

设定下限和上限

CSS 函数 clamp(min, preferred, max) 接受一个最小值、一个首选值和一个最大值。对于字体,用 rem 写最小值和最大值,用 vw 加一个 rem 项写首选值:font-size: clamp(2rem, 1rem + 4vw, 6rem)。尺寸在窗口变化时在 32 到 96 px 之间增长,并且从不超出任一端。因为其中一部分是 rem,文字仍然尊重读者的设置。

如何构建中间项

选两个屏幕宽度和您在每个宽度下想要的尺寸。例如在 360 px 宽时 32 px,在 1440 px 宽时 96 px。斜率是 (96 − 32) ÷ (1440 − 360) = 0.0593 px 每 px 宽度,即 5.93 vw,截距是 32 − 0.0593 × 360 = 10.67 px,约 0.667 rem。因此首选项是 0.667rem + 5.93vw。换算器帮您算 vw 的部分,其余一分钟的算术就能完成。

为什么这是正确的平衡

用 clamp,您既得到设计师想要的流式行为,又得到读者需要的无障碍。它是对上面所述麻烦的回答,也是大多数现代样式表只在 clamp 内部使用 vw 的原因。

如何在这里把 px 换算成 vw

输入像素值

在第一个输入框中输入以像素计的尺寸。接受小数。

设定设计稿的宽度

如果那是您设计稿的宽度,就保留 1440。如果不是,就更改它。结果会在您输入时更新。

复制 vw 值

在您的 CSS 中使用带单位的数字,如 font-size: 6.67vw。对于文字,请把它连同以 rem 计的限制一起放进 clamp() 里。

这些单位从哪里来

CSS 像素

当显示器不再有可预测的密度时,以真实像素度量的页面,会随着屏幕越来越清晰而缩小。于是 CSS 像素被重新定义为一个参考长度:在舒适阅读距离上看到的约 1/96 英寸。它是您的设计稿所用的绘制单位。

视口单位

vw 随响应式设计而来:视口宽度的百分之一,不管那是多少。它与相对于根字号的 rem、相对于元素的 em 并列。如果您需要相对于文字而不是屏幕的尺寸,请把 px 换算成 rem。

把 px 换算成 vw 时的陷阱

用错设计宽度

最常见的错误。如果您的设计稿宽 1920 而您用 1440 换算,每个尺寸都会差三分之一。请在设计工具中确认画板的宽度。

忘了移动端设计

许多团队有两份设计稿,一份给桌面,一份给手机。在第一份上是 96 px、在第二份上是 40 px 的标题,不是一个 vw 值。用两个宽度、两次换算和一个 clamp 把它们连起来。

把整个页面都放进 vw

一个一切都随窗口缩放的页面失去了阅读的感觉:在宽屏上行太长,在窄屏上文字太小。对少数应当缩放的东西用 vw,其余用固定或 rem 的尺寸。

忽略缩放问题

把浏览器缩放到 200% 来测试您的页面。如果文字没有增大,尺寸就需要一个 rem 项。

人们在换算之前问的问题

100 px 是多少 vw?

在 1440 px 的设计宽度下,约 6.94 vw。

用什么设计宽度最好?

您的设计稿绘制时用的那个。没有通用的默认值。

vw 比 rem 好吗?

它们做不同的工作。Rem 跟随读者的文字大小;vw 跟随窗口。各取所长。

我可以用 vw 设字号吗?

可以,但要把它放进 clamp() 并带上以 rem 计的限制,这样文字才保持可读,并且仍可缩放。

我的数字会被上传吗?

不会。算术在您的浏览器中运行,没有任何东西被发送到任何地方。

我怎样换回去?

用把 vw 换算成 px,它乘以宽度而不是除以。

在把 px 换算成 vw 时明智地选择

决定什么该随屏幕缩放

主视觉字体、大间隔和图稿:是。正文、边框、小控件:否。您的 vw 值清单越短,页面越稳固。

在设计阶段换算

如果您在阅读设计稿时就把 px 换算成 vw,您能立刻看出哪些值出来很零碎,并请设计师给更整齐的。结果是 6.6667 vw 的标题,会引出一场把它改成 6.5 或 7 的谈话。

记录下宽度

把设计宽度写在样式表顶部的注释里,这样以后换算的任何人都用同一个。混用的宽度会产生一个以没人能说清的方式不一致的页面。

从设计稿到流式样式表

列出应当缩放的尺寸

打开设计文件,写下您希望跟随屏幕的每个尺寸:主视觉标题、区块间隔,也许还有一幅大插画。对每一个,按画板的宽度把 px 换算成 vw,并记下结果。大多数页面最终只有不到十个这样的值,其他一切留在 rem 或像素里。

单独检查移动端画板

如果有手机设计稿,就在它的宽度上读同样的元素。在 1440 px 画板上是 96 px、在 375 px 画板上是 40 px 的标题,不符合任何单一的 vw 值,这就是使用 clamp 的信号:手机尺寸成为下限,桌面尺寸成为上限,vw 项在中间起作用。当您为每个画板把 px 换算成 vw 时,这两个数定义了斜率。

在三个宽度下审查

在大约 360、820 和 1440 像素下查看完成的页面,再在 2560 下看一次。流式布局在设计稿的宽度下很容易做对,而在别处微妙地出错,快速走一遍这些宽度,能在访客之前发现大部分问题。

让这个单位远离长文本

阅读文字的行最好用 rem 设定大小,并给出约 60 到 75 个字符的最大行长。对展示字体和间距使用视口单位,让阅读文字保持稳定。

相关换算器

同一系列的工具涵盖相邻的换算。要换回像素,请使用把 vw 换算成 px。对于相对于根的尺寸,有把 px 换算成 rem和把 rem 换算成 px,对于相对于元素的尺寸,有把 px 换算成 em和把 em 换算成 px。对于同一样式表的颜色,HEX 转 RGB和HEX 转 HSL处理这些记法。

一个演算示例

假设一个落地页以 1440 px 设计,主视觉标题 96 px,其上方的间隔 72 px。您输入 96 并读到 6.667 vw,输入 72 并读到 5 vw。在 1000 px 的窗口上,标题是 66.7 px,间隔 50 px,保持比例。但在 360 px 宽的手机上,标题会是 24 px,比您想要的小,所以您把标题写成 clamp(2.25rem, 1rem + 5vw, 6rem),给出 36 px 的下限和 96 px 的上限,它保持可读且可缩放。没有文字的间隔,保持为普通的 vw。

一份简短的清单

换算之前

找出设计稿的宽度。决定哪些尺寸应当缩放,哪些不应当。

换算之时

输入像素值和设计宽度,并复制带单位的 vw 数字。

换算之后

把窗口从手机宽度调整到宽显示器,并把页面缩放到 200%。凡是两端看起来不对的地方,用 clamp() 加上限制。

常见错误

假定 1440 是标准

它只是一种习惯。请用您自己的宽度。

只用 vw 设定正文大小

它无法缩放。请加上 rem 项和限制。

忘了滚动条

在会滚动的桌面页面上,100vw 比可见区域更宽。

您的数字留在您的设备上

计算在本地进行。您的值由您自己的浏览器使用,没有任何东西被发送到任何地方。事后没有什么需要删除,也没有账户需要创建。这就是把 px 换算成 vw 的朴素方式。

总结

要在这里把 px 换算成 vw,输入以像素计的尺寸和您设计稿的宽度,按公式 vw = px ÷ 宽度 × 100 立刻读出结果。宽度从 1440 px 开始,这是设计稿常用的绘制宽度,但它是习惯而不是标准,所以请输入您自己的。换算保留屏幕的份额:一 vw 是视口宽度的百分之一,所以以 vw 计的尺寸随窗口增大和缩小。与 rem 不同,vw 没有默认值,因为视口就是读者的窗口有多宽。对于文字,请在 clamp() 内把 vw 与 rem 结合,这样它保持可读且可缩放。不上传任何内容。