我正在尝试根据屏幕宽度从屏幕顶部更改导航栏的位置。我在 CSS: 中尝试过top: 10%
,但这是基于屏幕的高度而不是宽度。
有没有办法得到top: .1 * width
?
经常被忽视的是margin
元素的垂直百分比属性指的是它们的包含块width
,而不仅仅是水平的。
这意味着如果您将某些内容设置为margin-top:10%;
,它将具有相当于其包含块宽度的 10% 的上边距。
您可以在这个 jsFiddle中轻松看到这一点。尝试垂直和水平调整输出面板的大小,并注意哪个调整大小方向使内部块上下移动。
您可以使用vw
并且vh
如果您的浏览器目标允许,我建议您这样做。但是如果你不能使用它们,你不必马上使用 Javascript。太多的人在 Javascript 打开一个全新的蠕虫罐(例如,如果浏览器调整大小怎么办?)时立即为 Javascript 开枪,尤其是当对 CSS 的一点创造性使用无论如何都可以让你摆脱困境时。
我要说没有办法这样做,但显然在 2011 年以来的 CSS3 中,你有vw/vh允许大小相对于视口。例如:
img { height: 95vw; }
应该给图像的高度是视口宽度的 95%。阅读更多; 在撰写本文时,显然只有 IE9 支持它。