html - 重新计算实时像素中的百分比？

Question

我的元素有一个基于百分比的流畅水平网格，并且喜欢使用与水平网格完全相同的垂直边距。

所以我有这样的东西:

.block_12_24{
display:inline-block;
vertical-align:top;
width:48%;
margin-right:2%;
margin-left:0;
/* Now this is what I need to have the very same as the margin-right-value: */
margin-top: 17px; //instead of that
}

现在我希望 margin-top 的值与 margin-right 的值相同。我的猜测是，我需要将 2% 重新计算为像 px 这样的绝对数量，并将该值分配给 margin-top。一直检查它并不重要，一开始只检查一次。 JavaScript 是否是这样做的唯一可能性:

1. 给 margin-top 一个大致合适的值，比如 17px
2. 让页面加载
3. 通过 JavaScript 检查浏览器的像素宽度
4. var margin= that_amount/50;
5. 将 .block_12_24 的 margin-top 操作成该数量

或者我也可以只用 CSS 来实现吗？谢谢

Answer 1

如果您总是在窗口大小基础上设置边距(您的文档不能水平滚动)，您可以使用视口(viewport)百分比值 vw 而不是通常的百分比:

margin: 2vw;

这将根据宽度设置所有边的边距。

所有浏览器对这种方法的支持是quite good .