html - 隐藏一个 div 仍然占用屏幕空间

Question

很简单，我有两个 div，当浏览器宽度高于某个值时显示一个，当浏览器宽度低于某个值时显示另一个，使用此 css:

@media only screen and (max-width: 1200px) {
    .desktop {
        visibility: hidden;
    }

    .mobile {
        visibility: visible;
    }
}

还有这个 HTML:

<div class="desktop">Desktop stuff</div>
<div class=mobile">Mobile Stuff</div>

从可见性的 Angular 来看效果很好，但它不会释放屏幕空间。无论是否看到 div，空间都会被占用。

如何使 div 不仅不可见，而且在不可见时不占用任何空间，如果这有意义的话？

谢谢

Answer 1

使用display 样式代替visibility:

@media only screen and (max-width: 1200px) {
    .desktop {
        display: none;
    }

    .mobile {
        display: block;
    }
}