Html 重新计算实时像素百分比？

我的项目有一个基于流体百分比的水平网格，并且喜欢使用与水平网格相同的垂直边距

所以我有这样的想法：

.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，然后将该值分配给margintop。一直检查并不是很重要，一开始只检查一次。这样做的唯一可能性是JavaScript：

给边距顶部一个大致合适的值，如17px

让页面加载

通过JavaScript检查px中的浏览器宽度

var保证金=该金额/50

将.block_12_24的页边距顶部调整为该值

或者我也可以只在CSS中这样做吗？

---

谢谢

如果您总是在窗口大小基础上设置边距（您的文档不能水平滚动），您可以使用视口百分比值

vw

而不是通常的百分比：

margin: 2vw;

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

---

所有浏览器都支持此方法。

您需要窗口高度还是文档高度？如果是窗口，请尝试

vh

。但是如果设备的显示不是方形的，则2vw和2vh之间应该存在差异？我怎样才能得到他们之间的关系？但我没有建议您使用

vh

。请再看一下这个例子，我建议对垂直和水平边距使用

vw

。这会管用的，试试看；这是视口百分比值的主要优点：您可以在任何CSS属性中引用它，并且可以选择依赖什么：宽度或高度。啊，好的。这是有道理的使用大众汽车作为一个聪明的黑客水平和垂直的目的。这开启了许多新的可能性——谢谢你的解释。