基於寬度更改頂部位置％

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

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

2013-07-18 BDGapps

1 *寬度是什麼意思？ –

發佈一些代碼或顯示jsfiddle。 –

你將需要使用JavaScript來完成這個 – kennypu

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

img { height: 95vw; }

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

2013-07-18 03:45:16 icedwater

一旦屏幕點擊x尺寸，我將如何調用此方法，與我的最小寬度爲#px，然後寬度爲％相同。 – BDGapps

然後，您需要查看媒體查詢。 – icedwater

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

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

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

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

2013-07-18 04:14:18

長期以來一直使用保證金百分比，我不知道他們是如何工作的。謝謝。 –

回答