基於寬度更改頂部位置％

Question

我想根據屏幕寬度從屏幕頂部更改導航欄的位置。我試過在CSS：top: 10%，但這是基於屏幕的高度而不是寬度。

有沒有辦法得到top: .1 * width？

Answer 1

我打算說沒有辦法這樣做，但顯然在2011年以來的CSS3中，您有，它們允許尺寸與視口相關。例如：

img { height: 95vw; } 

應該給圖像的視口寬度的95％的高度。閱讀更多;顯然只有IE9在撰寫本文時支持它。

Answer 2

經常被忽視的是元素的垂直margin百分比屬性指的是它們的包含塊的width，而不僅僅是水平的。

這意味着如果你設置了一些東西到margin-top:10%;，它將有一個相當於的頂部邊距，它包含塊的寬度的10％。

你可以很容易地看到，in this jsFiddle。嘗試垂直和水平調整輸出面板的大小，並注意哪個大小方向會使內部塊向上和向下移動。

您可以使用vw和vh如果您的瀏覽器目標允許，我會建議。但是如果你不能使用它們，你就不必馬上使用Javascript。太多的人會馬上爲Javascript開槍，當它打開一個全新的蠕蟲罐時（比如，如果瀏覽器調整大小？），尤其是當一些創造性的CSS使用可以讓你脫離粘滯點時。