如何根据屏幕宽度覆盖CSS

Question

下面我写了一些css以确保我的“部分”在导航时用完整个屏幕，但是当浏览器窗口缩小或在移动设备上访问时，内容会因为不适合而丢失。

我已经制作了一个媒体查询来反击css的第一位但是我不知道如何设置它以对抗它。

@media screen and (max-width: 550px){
section.full {height: auto;}
section.contactfull {height: auto; margin-top:0%;}

}

section.full {height: 100vh;}
section.contactfull { 
height: 70vh;

margin-top: 10%;
}

Answer 1

我认为你必须让事情顺流而下。无论人们使用什么设备，您都可以只限制其中一个维度，但不能同时限制这两个维度。

只需水平调整，让它们垂直流动。

Answer 2

如果您希望该部分占据整个屏幕，您可以使用以下内容：

section {
  display: fixed;
  width:100%;
  height:100%;
}

我认为vh失败的原因是因为在较小的分辨率下，水平滚动条会显示在您的网页上，而vh并未将其考虑在内。