基於使用CSS

Question

我們正在開發一個我們的產品和多種原因了全新的UI屏幕分辨率兩個div之間切換有需要根據設備是否爲移動或桌面2個<div>標籤之間切換。每個<div>將包含移動或桌面適當的內容，而是因爲我們只有一個HTML頁面，我們需要打開一個<div>同時關閉另一個的能力。

這個問題的跟進東西this SO question這是非常相似，我問什麼，我在這裏。回顧一下發現那裏的解決方案，有兩個<div> S：

<div class="visible-phone"> 
    content for phone 
</div> 

<div class="visible-desktop"> 
    content for desktop 
</div> 

，並有應用最大或最小屏幕分辨率兩個CSS規則：

.visible-phone{ 
    @media (max-width: 480px) { more css } 
} 

.visible-desktop{ 
    @media (min-width: 768px) { more css } 
} 

要到一點，考慮一個最小寬度爲700px，最大寬度爲900px的設備。這將通過上述CSS邏輯的裂縫，並會導致兩個<div>都不可見。再舉一個例子，500px到750px的設備也不會被覆蓋。

任何人都可以提出一個完整的證明方法，以避免在參考答案的弱點是什麼？基於CSS的解決方案將在這裏首選。

Answer 1

什麼，你可以用的是媒體查詢中顯示無。使用指定給每個div的不同類，例如移動和桌面，然後在桌面設置的媒體查詢中使用.visiblephone {display：none;}和查詢移動設置。確保您指定媒體查詢內的一個DIV將永遠被隱藏，那麼你就必須讓你的屏幕大小值=）

Answer 2

如果我理解正確的話，你正在嘗試做的：

CSS

@media screen and (max-width: 480px) { 
    .visible-phone{ 
    display: block !important; 
    } 
    .visible-desktop{ 
    display: none !important; 
    } 
} 
@media screen and (min-width: 480px) { 
    .visible-phone{ 
    display: none !important; 
    } 
    .visible-desktop{ 
    display: block !important; 
    } 
}