减小宽度时减小图像高度

Question

所以。.我的问题是关于响应式设计。

我的导航栏为20％，身体为60％，页脚为20％。

一切都很好，但是涉及到较小的设备。随着宽度的减小，我不希望身体有60％。我想知道如何制作，以便在每像素减小设备宽度时，以及高度在动态降低每个x时。

你能帮我吗？

谢谢。

Answer 1

当页面宽度缩小时，使用vw而不是percent（％）作为要缩小的元素的高度的单位。在您的示例中，高度为20％的导航栏变为高度：10vw（这是我的屏幕上的等效高度。在您的屏幕上可能会有所不同-使用vw值直到看起来正确为止。）我的导航栏出现了：10vw，身体：36vw，页脚：10vw。 - 要么 - 从您的问题看来，您似乎只希望身体收缩，在这种情况下，请尝试使用导航栏：20％，身体：36vw和页脚：20％。

希望这会有所帮助。