CSS vw和百分比值转换为像素值

Question

我们如何知道width:100%和width:100vw中有多少像素？

情况

body{
 width:100%;
}
.container{
  width:1000px;
}

我如何获得确切的价值？

balanceWidth = bodywidth - containerwidth

我知道css calc width: calc(100% - 1000px); ，我需要获得精确的像素值

Answer 1

为此：

balanceWidth = bodywidth - containerwidth

您可以使用计算方法：

width: calc(100% - 1000px);

如果您有1000px宽的元素，则假设宽度百分比为100％，对于1％，您可以计算1000px除以100。

Answer 2

假设您的容器宽度为1000px，而您的css值为10vw，则表示容器宽度为10%，与使用10%非常相似。

以10vw为例，这意味着10%。

参考：https://css-tricks.com/viewport-sized-typography/