html - 如何使用 VH 制作响应式英雄背景图片？

Question

:)

我有一个响应式标题。

这是英雄部分的代码:

.hero {
    background: url(../../img/hero.jpg);
    background-size: cover;
    background-position: center center;
    position: relative;
    height: 100vh;
    margin: 0;
    @include breakpoint($x-large) {
        padding-left: 5%;
        padding-right: 5%;
    } 

这一切都很棒而且 react 灵敏；但是，当我在 web 上打开控制台或在 android 上打开键盘时，vh 不会改变，按钮和文本元素保持向下移动。

我试过添加填充和特定媒体查询以及其他解决方案，但我找不到通用有效的解决方案...

为什么会发生这种情况，我该如何解决？

Answer 1

您需要将 .container-hero 附加到 .hero 的底部。

.container-hero {
  position: absolute;
  bottom: 5%;
}

由于 position: absolute;，您还需要修复布局。

但你明白了:)