css - 如何让我的网站响应横向移动设备？

Question

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

有什么想法吗？或者让页面在横向方向也能响应的技巧？

这是我的页面: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;
}

这应该使它响应。