如何将像素（px）、字号单位（em/rem）转换为100vw（全宽度的100%）中的视窗单位（vw）？

Question

如何将45px/45em/45rem转换为占据100vw（100% 宽度）的vw值？是否可以使用CSS完成？

font-size:calc(calculation for 45px to vw in 100vw);

font-size:calc(calculation for 45em to vw in 100vw);

font-size:calc(calculation for 45rem to vw in 100vw);

- user10972947

---

可以使用JavaScript完成。 - Ahmed Ali

为什么不使用CSS的媒体属性根据设备分辨率更改字体大小，如下所示：默认 .text { font-size: 2rem } @media (max-width: 960px ) { .text { font-size: 1rem } } 尝试了解CSS中的媒体查询，这将非常有帮助。 - Rolstan D'souza

这是什么意思？字体大小是否应随视口宽度缩放？ - Ry-

@Ry，是的。它应该可以。 - user10972947

Answer 1

.ha{
 font-size: calc(100vw / 45);
}

<a class='ha'>Hello World</a>

The calc() function performs a calculation to be used as the property value.
To calculate the vw we can divide 100vw to your requried px.

1像素 = (100vw / [文档.documentElement.clientWidth] 像素)

例如，如果您的视口宽度为500像素（根据定义等于100vw），则

视口宽度 = (100vw / 45px) = 2.2vw。

- Ahmed Ali

---

你的答案在45px上有效，但在其他地方我遇到了问题。快速查看链接：https://codepen.io/alrahat/pen/ZEEvXjN - user10972947

请求按钮为18像素，登录/注册为16像素，菜单为15.5像素。 - user10972947

请查看图片，我想要像上面的图片那样的顶部和菜单区域。 - user10972947

明白了。只需在除法后面添加* 1px，就像这样：font-size:calc(100vw / 15.5 * 1px); 因为问题出在calc(100vw / 15.5)上，你只会得到一个没有单位的数字。CSS无法将仅数字显示为宽度。这就像您设置width：5.5一样，显然不起作用。 - Ahmed Ali

Answer 2

以下是计算公式：

PX: px / viewport total width * 100
REM: ((rem * rem size) / vw) * 100
EM: ((em * em size) / vw) * 100

在这里你可以看到更多关于它们的信息：

PX: https://cssunitconverter.vercel.app/px-to-vw#faq

REM: https://cssunitconverter.vercel.app/rem-to-vw#faq

EM: https://cssunitconverter.vercel.app/em-to-vw#faq

P.S. 顺便说一下，我猜REM和EM的计算逻辑是一样的。

- Arthur Arakelyan

---

抱歉，我已经修复了 :) - undefined