隱藏一個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; 
    } 
}