隐藏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>

从可见性的角度来看，它可以正常工作，但它不会释放屏幕空间。无论你是否能看到div，都会占用空间。

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

由于

Answer 1

使用display样式代替visibility：

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

    .mobile {
        display: block;
    }
}