vw 转 px Viewport width ↔ Pixels 免费 在线 安全
用 vw 写一个值，右边立刻就是 px。算术在你的浏览器里跑，什么都不往外发，而结果取决于什么，下面写着，不靠默认。
不上传任何文件
常见尺寸 — vw 转 px
| vw | px |
|---|---|
| 0.5 | 7.2 |
| 1 | 14.4 |
| 2 | 28.8 |
| 5 | 72 |
| 10 | 144 |
| 25 | 360 |
| 50 | 720 |
| 100 | 1440 |
这些单位从哪里来
CSS 里的像素不是你屏幕上的像素。当显示器的像素密度不再可以预料，用真实像素度量的页面便成了屏幕越细腻、页面就越缩小的页面；于是 CSS 像素被重新定义为一个参照长度：在舒适的阅读距离上看去，约等于一英寸的九十六分之一。本页其余一切都建在这上面。em 比万维网更老——在铅字里它是一枚铸块的宽度，名字取自大写字母 M——在 CSS 中它指当前生效的字号，所以嵌套元素时它会变。rem 的加入正是为了躲开这一点：它是根元素的 em，从不叠加。vw 随响应式设计而来：视口宽度的百分之一，无论那宽度最后是多少。
你会在哪里遇到它们
这些是每一张样式表的单位。像素用来定边框、阴影，以及一切不该随之缩放的东西；rem 用来定字号、间距与布局，于是在根上改一次，整个界面随之改变；em 用来定那些应当跟随自身文字的东西，比如按钮内侧的留白；vw 用来定在任何设备上都要铺满屏幕的标题与首屏。彼此之间的换算，正是把以像素交付的设计稿变成能够伸缩的样式表时，每天都要做的算术。
常见问题
为什么 16 px 是惯常的起点？
因为那是所有主流浏览器的默认文字大小，而没有改写它的样式表会继承它。于是在默认设置下，1 rem 就等于 16 px，熟悉的换算也由此而来：0.5 rem 是 8 px，1.5 rem 是 24 px。如果用户在浏览器设置里调大了默认值，同样的 rem 数值也会随之变大——用它的意义恰恰在此。
该用 rem 还是 em？
凡应跟随整页的东西都用 rem——字号级差、间距、布局宽度——因为它自根部量起，从不累积。凡应跟随自身所在文字的东西都用 em——按钮的内侧留白、图标旁的空隙、引文的缩进。常见的错误是把以 em 定尺寸的元素层层嵌套：1.2 em 里的 1.2 em 变成 1.44，接着 1.73，直到页面底部的文字比预想的大了一倍。
结果精确吗？
两个单位若以整数互相定义，那就是精确的——本页在数字上方说明了这一点，唯一的舍入在于显示多少位。若比值没有有限小数，本页给出十二位有效数字，并说明这个关系是近似的，而不是装作不是。
我敲进去的东西会离开我的设备吗？
不会。运算在你的浏览器里进行；没有任何东西被上传，也没有接收它的服务器。页面加载一次之后，断网也照样能用。
为什么要把 vw 换算成 px
样式表里写着,英雄标题 font-size: 5.2vw,某个区块 margin-top: 8vw,图片 width: 42vw。它们都是灵活的数值,并不告诉您屏幕上到底是什么。标题在手机上有多大?图片在笔记本电脑上有多宽?边距在 1920 像素下看起来对吗?要弄清楚,您就把 vw 换算成 px:把这个数字乘以窗口的宽度再除以一百,然后用设计师、测试人员和客户所用的单位读出答案。审阅流式代码、对照设计稿检查构建结果、或向同事解释为什么窄屏上标题显得小,您做的就是这件事。
这种换算与 rem 或 em 的不同之处在于,乘数就是窗口本身。一个 vw 是视口宽度的百分之一,所以在 1000 px 宽的窗口里 5.2vw 是 52 px,在 360 px 宽的手机上是 18.7 px,在 1920 的宽显示器上是 99.8 px。没有默认值可以回退,而且读者旋转手机或拖动窗口时宽度就会改变。因此换算器会询问宽度,把它显示在答案旁边,并从 1440 px 开始,这是设计稿常用的宽度。
计算在您的浏览器中进行,不会上传任何内容。下面您会找到公式、这种换算保留什么和无法保留什么、如何在几个宽度下阅读流式样式表、滚动条的陷阱、纯 vw 文字的无障碍问题,以及几个让流式代码保持易懂的习惯。
公式与宽度
px 等于 vw 乘以宽度再除以一百
公式是 px = vw × width ÷ 100。在 1440 px 的宽度下,10 vw 变为 144 px,5 vw 变为 72 px,1.667 vw 变为 24 px。页面会在结果旁打印宽度,所以像 10 vw = 144 px (1440 px) 这样的一行告诉您假设的是什么。要查看另一块屏幕,请改变宽度并重新读取结果。
该试哪些宽度
一组有用的检查宽度是:手机 360 或 390,竖屏平板 768,小笔记本 1024,典型笔记本或台式机 1440,全高清显示器 1920。在宽度栏里依次输入并记下结果。五个读数就能让您看到一个数值的整个范围,任何极端情况都会跳出来。
使用实际窗口的宽度
在浏览器的开发者工具中,设备工具栏以像素显示窗口的宽度。用这个数字来比较页面的表现和换算器的结果。如果两者一致,说明您对样式表的解读是对的。
这种换算保留什么,无法保留什么
它保留屏幕的占比
一个 vw 是视口宽度的百分之一,所以以 vw 书写的尺寸会随窗口增大和缩小,而不是原地不动。您得到的像素值,就是这个占比在某个特定宽度下的具体化。
它无法给出默认值
与 rem 不同,vw 没有默认值。当没有人另作规定时,浏览器给根字号 16 px,所以 rem 页面可以从一个真实的数字出发;视口宽度则恰是读者窗口的宽度,读者转动手机时它就会改变。这里的 1440 px 是设计稿常用的宽度,是一种习惯而不是标准。请输入您自己的。
舍入
乘以宽度再除以 100 可能产生小数。1440 px 下的 6.67 vw 是 96.048 px。浏览器能处理小数像素,但如果您的设计文件需要整数,请舍入并注明这次舍入是您做的。
阅读流式样式表
取三个宽度并写下结果
选一个窄的、一个中等的和一个宽的宽度,例如 375、1024 和 1920。对样式表中每个重要的 vw 值,在每个宽度下把 vw 换算成 px,并把三个数字写在笔记里。5.2 vw 的标题得出 19.5、53.2 和 99.8 像素。这样看,您就知道标题在窄端是否可读、在宽端是否不至于压倒一切。
留意 clamp
写得好的流式代码会用 clamp(min, preferred, max) 在 vw 周围设定限制。如果您看到 clamp(2rem, 1rem + 4vw, 6rem),尺寸会在 32 到 96 px 之间增长,并在两端保持不变。当您换算其中的 vw 部分时,请记住它只是范围的中段,边缘处会发生什么由限制决定。
检查极端
有风险的宽度是最小的和最大的。在 320 px 时,6 vw 的标题是 19 px;在 2560 时是 154 px。如果两者看起来都不能接受,而又没有 clamp,样式表就需要限制。
把 vw 换算成 px 时的陷阱
滚动条
在桌面浏览器中,用于 vw 的视口宽度包括垂直滚动条的宽度。所以当页面滚动时,100vw 比可见区域略宽,在许多系统上约宽 15 到 17 像素。因此您算出的像素值比它看似代表的可见宽度略大。在滚动条覆盖在页面上的手机上,这种影响不存在。
用错宽度
结果的正确程度只取决于您输入的宽度。如果您的测试窗口是 1366 px 宽,而您按 1440 换算,每个值都会偏差约百分之五。请从开发者工具中读取真实的宽度。
混淆 vw 与百分比
50% 的宽度指的是父元素的宽度,而 50vw 指的是窗口。在窄容器内部,两者大不相同。换算器给出的是 vw 的答案;如果您的元素在容器内,父元素可能比窗口窄。
忘了以 vw 设置的文字无法缩放
仅以 vw 设置尺寸的文字,在读者缩放页面时不会作出响应,因为窗口和文字一起缩放。无障碍指南要求文字可以调整大小。请像在 clamp() 里那样加入一个 rem 项,让文字也能响应缩放。
换算之前人们常问的问题
1 vw 是多少像素?
窗口宽度的百分之一:1440 宽时是 14.4 px,1000 宽时是 10 px,360 宽时是 3.6 px。
50 vw 是多少像素?
窗口的一半:1440 宽时是 720 px,1000 宽时是 500 px。
为什么我的页面比屏幕宽?
在会滚动的页面上,100vw 的盒子比可见区域宽,因为滚动条被计算在内。请改用容器内的 100%。
vw 与百分比相同吗?
不同。百分比指的是父元素,vw 指的是窗口。
我的数字会被上传吗?
不会。算术在您的浏览器中运行,不会向任何地方发送任何内容。
我如何换回去?
用px 转 vw,它是除以宽度而不是乘以宽度。
常见宽度下的常见数值
一张心算表
知道几个锚点会有帮助,这样您在使用换算器之前就能估算。在 1000 px 的宽度下,1 vw 是 10 px,这使算术变得微不足道:2.5 vw 是 25 px,8 vw 是 80 px。在 1440 px 下,1 vw 是 14.4 px。在 375 px 下,1 vw 是 3.75 px,所以 8 vw 的标题是 30 px。当您为快速核对把 vw 换算成 px 时,从这些锚点之一出发再按比例缩放。
三个宽度,一份样式表
取一张卡片,宽度 80vw,间隙 4vw,标题 6vw。在 375 px 的手机上它们分别是 300 px、15 px 和 22.5 px。在 768 px 的平板上是 614 px、30.7 px 和 46 px。在 1440 px 的台式机上是 1152 px、57.6 px 和 86.4 px。把三者并排看,您立刻明白卡片在桌面上宽得离谱、标题大得过分,您大概需要一个最大宽度和一个 clamp。
视口之外
容器单位
较新的 CSS 提供相对于容器而不是窗口的单位,例如 cqw,即容器宽度的百分之一。它们解决了这样的问题:放在窄侧栏中的组件表现得像拥有整个窗口。如果您使用它们,算术与 vw 相同,只是以容器的宽度为基准,您可以通过输入那个宽度来使用本换算器。
小视口、大视口与动态视口
在手机上,地址栏滑走时可见区域会变化。对于高度,较新的单位 svh、lvh 和 dvh 分别描述小视口、大视口和动态视口。对于宽度,情况更简单,因为地址栏不影响它,vw 是稳定的。这也是为什么在移动端的流式设计中,vw 是比 vh 更安全的单位的又一个原因。
百分比、vw 与网格
百分比宽度跟随父元素,vw 跟随窗口,而 CSS 网格和弹性盒跟随可用空间。最好的流式布局往往用网格和百分比做结构,只对字体和间距用 vw,因为这些正是受益于直接跟随屏幕的东西。当您为检查布局把 vw 换算成 px 时,请问问一个网格轨道是否能更稳健地表达同样的意思。
向不写 CSS 的人解释 vw
用窗口当尺子
只要您说一个 vw 是屏幕宽度的百分之一,客户和同事通常就能明白这个想法。5 vw 的标题就是屏幕宽度的百分之五那么宽。然后给他们看两个数字:在他们自己的手机上和会议室的大显示器上是多少。当您为两个宽度把 vw 换算成 px 并大声说出结果时,随屏幕移动的尺寸这个想法就变得具体了。
说明为什么设计不是固定的
非技术的利益相关者有时会问,为什么页面不干脆给标题一个固定尺寸。答案是,从最小的手机到最大的显示器,屏幕相差七八倍,适合其中一个的固定尺寸对另一个就是错的。流式单位就是答案,而本页的像素数字显示了屏幕让同一个值变化多大。
这些单位从何而来
CSS 像素
当显示器不再有可预测的密度时,以真实像素度量的页面会随着屏幕越来越清晰而缩小。于是 CSS 像素被重新定义为一个参考长度:在舒适阅读距离下看到的约 1/96 英寸。这是本页给出答案所用的单位。
视口单位
vw 随响应式设计而来:视口宽度的百分之一,无论那宽度是多少。它与相对于根字号的 rem 和相对于元素的 em 并列。要看同一个像素值在那些单位里是什么样子,请把 rem 换算成 px并比较。
让流式代码保持易懂的习惯
注释像素值
像 font-size: clamp(2rem, 1rem + 4vw, 6rem); /* 32px at 360, 96px at 1440 */ 这样的一行只需几个字,却能为下一位读者省去好几次换算。
把设计宽度放在一个地方
如果您的项目有一个自定义属性记录设计稿所用的宽度,每个 vw 值都可以追溯到它。当您为审阅把 vw 换算成 px 时,您知道该用哪个宽度。
少用 vw
一小串 vw 值很容易推理。一份全部使用 vw 的样式表则不然。把它留给展示字体、大间距和插图。
要紧时用真机测试
浏览器工具能很好地模拟宽度,但真机才能显示地址栏、旋转和缩放的真实行为。在设备上做五分钟的检查,能抓到模拟漏掉的东西。
相关换算器
同一系列的工具涵盖相邻的换算。要换回 vw,请用px 转 vw。对于相对于根的尺寸,有px 转 rem和rem 转 px,对于相对于元素的尺寸,有px 转 em和em 转 px。对于同一份样式表的颜色,HEX 转 RGB和RGB 转 HEX处理这些记法。
一个实际例子
假设测试人员报告说,英雄标题在小手机上难以阅读。样式表写着 font-size: 5.2vw,没有任何限制。您在 360 下把 vw 换算成 px,读到 18.7 px,在 768 读到 39.9 px,在 1440 读到 74.9 px。在窄端,标题只比正文略大,不再像个标题了。您建议 clamp(2rem, 1rem + 4vw, 5rem),它在最窄时给出 32 px,在 768 时约 51 px,在最宽时是 5rem,即 80 px。测试人员确认现在读起来很好,而标题仍会缩放。
一份简短清单
换算之前
选出您关心的宽度,来自开发者工具或您的目标设备清单。
换算之时
依次输入 vw 值和每个宽度,并记下基准旁显示的像素。
换算之后
看一看极端情况。如果某个尺寸在任一端过小或过大,请用 clamp() 加上限制。
常见错误
假设只有一个答案
vw 值在每个宽度下都有不同的像素大小。每个数字都要附上宽度。
忘了滚动条
100vw 包括它,所以满宽的盒子可能溢出。
仅以 vw 设置正文文字
它无法缩放。请加入 rem 项和限制。
您的数字留在您的设备上
计算在本地进行。您的数值由您自己的浏览器使用,不会向任何地方发送任何内容。事后没有什么要删除,也无需创建账户。这就是把 vw 换算成 px 的朴素方式。
小结
要在这里把 vw 换算成 px,输入以 vw 计的尺寸和窗口的宽度,立即以像素读出结果,公式是 px = vw × width ÷ 100。宽度从 1440 px 开始,这是设计稿常用的宽度,但它是一种习惯而不是标准,所以请输入您自己的。这种换算保留屏幕的占比:一个 vw 是视口宽度的百分之一,所以以 vw 计的尺寸随窗口增大和缩小。与 rem 不同,vw 没有默认值,因为视口恰是读者窗口的宽度。对于文字,请在 clamp() 里把 vw 与 rem 结合,使它保持可读且可缩放。不会上传任何内容。