CSSを使用して画面解像度に基づいて2つのDIVを切り替える

Question

当社の製品の新しいUIを開発しており、デバイスがモバイルかデスクトップかに応じて2つの<div>タグを切り替える必要があります。各<div>にはモバイルまたはデスクトップ用の適切なコンテンツが含まれますが、HTMLページは1つのみであるため、もう1つをオフにしながら<div>をオンにする必要があります。

この質問は、this SO questionのフォローアップのようなもので、私がここで尋ねているのと非常に似ています。

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

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

およびいずれかの最大値または最小画面解像度採用2つのCSSルールがあります：そこに見つかったソリューションをおさらいするには、2つの<div>のある

.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

あなたが使用できるものは、メディアクエリ内に表示なしです。 .visiblephone {display：none;}とモバイルセットのクエリ.visible-desktop {display：none;}

これは、モバイルとデスクトップのような各部門に割り当てられた異なるクラスを使用します。私が正しくあなたを理解していれば、あなたがやろうとしている

Answer 2

）=あなたの指定されたメディアクエリ内1つのdivは常に非表示になり、その後、あなたは自分の画面サイズ値を取得する必要があることを確認してください。

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; 
    } 
}