在任何浏览器屏幕尺寸下无需滚动即可设置设计

Question

我需要设计一个带有html，bootstrap等的网站。主要的缺点是，在任何浏览器窗口大小中，滚动条都不必出现。图像和其他必须对此进行调整。屏幕就像：

请帮我。

Answer 1

这是困难的一个。您必须使用媒体查询来获取高度，考虑到流行的高度，并使中间高度状态的元素不会溢出屏幕。我建议您使用以下媒体查询并相应地调整每个媒体查询的元素：

@media (min-height: 1200px) {
    .banner{ height: 760px; } //example
}

@media (min-height: 1080px) {
    .banner{ height: 600px; } //example
}

@media (min-height: 900px) {
    .banner{ height: 560px; } //example
}

@media (min-height: 800px) {
    .banner{ height: 440px; } //example
}

@media (min-height: 768px) {
    .banner{ height: 400px; } //example
}

@media (min-height: 600px) {
    .banner{ height: 300px; } //example
}