Css 如何使我的网站对横向移动设备做出响应？

我的第一个个人网站几乎准备好了！该页面已联机！ 我对响应性设计有一些问题，尤其是在景观导向方面！尽管我在css中写了height:100vh，但登录页在横向方向上比视口高

有什么想法吗？或tipps，使页面在横向方向上也具有响应性

这是我的网页：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;
                  }

弗洛里安·斯多格
音乐家|鼓手|老师
#图1{
背景图像：url（Images/Header1.jpeg）；
背景重复：无重复；
背景尺寸：封面；
背景附件：固定；
背景位置：中心；
高度：100vh；
宽度：100vw；
}

在

#picu 1

中，高度

高度：100vh

被

高度：计算（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;
}

汉堡部{ 宽度：25px； 高度：3倍； 背景色：白色； 保证金：3倍；

---

右边距：2rem；//你说的是

#picu 1

？请添加你的代码不，它不是！高度：calc（var（-vh，1vh）*100）与100vh相同…这一行代码还包含一点javascript…这是因为移动浏览器的地址字段包含在视口高度中…因此如果没有这一行代码#pic_1与视口重叠…您可以分享您可以使用的代码片段吗？这将有助于更快地调试问题。a回答你的问题？还是它还没有被修复？不需要的窗口宽度不是来自汉堡菜单…它来自于#title_1和#title_2上的动画。这是因为溢出隐藏在移动浏览器中不起作用，所以我不得不用一个小技巧来修复这个问题…但它仍然不像桌面上的那样完美…但它仍然不完美ixed…在www.responsinator.com上看起来不错，除了字体大小…但是在真实的设备上（我在iphone SE上观看页面）#PICU 1比视口高。。。