根据宽度%更改顶部位置

Question

我正在尝试根据屏幕宽度从屏幕顶部更改导航栏的位置。我尝试了CSS：top: 10%，但这是基于屏幕的高度，而不是宽度。

有没有办法让top: .1 * width

Answer 1

经常被忽略的是，元素的垂直margin百分比属性指的是它们所包含的块的width，而不仅仅是水平的。

这意味着如果你设置了margin-top:10%;，它将会有一个相当于包含块宽度的10%的的上边距。

您可以很容易地看到该in this jsFiddle。尝试垂直和水平调整输出面板的大小，并注意调整大小的方向会使内部块上下移动。

您可以使用vw和vh，如果您的浏览器目标允许，我建议您这样做。但是如果你不能使用它们，你也不必马上使用Javascript。当Javascript打开了一个全新的蠕虫罐头(例如，如果浏览器调整大小怎么办？)时，太多的人立即为它而战，特别是当创造性地使用CSS可以无论如何都能让你摆脱困境的时候。

Answer 2

我要说的是没有办法做到这一点，但很明显，从2011年起，在CSS3中就有了允许大小相对于视口的vw/vh。例如：

img { height: 95vw; }

应将图像的高度设置为视口宽度的95%。阅读更多；显然在撰写本文时只有IE9支持它。