如何使我的网站以横向方向响应移动设备

Question

我的第一个个人网站快准备好了！该页面已经上线！我对响应式设计有一些问题，尤其是在横向方面！着陆页在横向上高于视口，尽管我在 css 中写了高度：100vh！

有什么想法吗？或者提示使页面也以横向响应？

这是我的页面： www.florian-drums.com

     <div id="pic_1">
        <h1 id="title_1"><span>Florian Stöger</span></h1>
        <h2 id="title_2"><span>Musician | Drummer | Teacher</span></h2>    
     </div>

           #pic_1 {
                   background-image: url(Images/Header1.jpeg);
                   background-repeat: no-repeat;
                   background-size: cover;
                   background-attachment: fixed;
                   background-position: center;
                   height: 100vh;
                   width: 100vw;
                  }

Answer 1

在#pic_1中，高度height: 100vh被height: calc(var(--vh, 1vh)*100)覆盖。

另外，要处理不需要的窗口宽度增加到 100% 以上，您需要更改提供给#burger div的边距：

#burger div {
    width: 25px;
    height: 3px;
    background-color: white;
    margin: 3px;
    margin-right: 2rem; // <-- reducing margin
    transition: transform, opacity 400ms, 400ms;
}

这应该使其具有响应性。