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;
}

这应该使其具有响应能力。

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

1 个答案: