javascript - 随着宽度变小，如何增加一个元素与另一个元素的距离？

Question

我正在使用HTML/CSS/JS创建一个网站，但遇到了问题。在首页上，我有一个图像和图像上方的文本，图像具有 100% 的宽度和 487px 的固定高度，我将文本设置为position:relative;and top:34vh。

当网站处于正常桌面大小时，它看起来应该如此，但是当我尝试使其具有响应性时，随着宽度变小，文本也应该变小，并且它的位置也会改变。我想要的是将文本粘贴到图像的底部。

我将举例说明它的外观以及我希望它的外观。

先感谢您！

标签： javascripthtmlcss

Answer 1

媒体查询。

我会这样做：

.element {
  margin-top: 50vh
}
@media only screen and (min-width 500px) {
  .element {
    margin-top: 90vh
  }
}
@media only screen and (min-width 1000px) {
  .element {
    margin-top: 90vh
  }
}