bascule entre deux DIVs en fonction de la résolution d'écran en utilisant CSS

Question

Nous développons une nouvelle interface utilisateur pour un de nos produits et pour un certain nombre de raisons, nous avons besoin de basculer entre deux balises <div> selon que l'appareil soit mobile ou de bureau. Chaque <div> contiendra le contenu approprié pour mobile ou de bureau, mais parce que nous avons seulement une seule page HTML, nous avons besoin de la possibilité d'activer un <div> tout en désactivant l'autre.

Cette question fait suite à this SO question qui est très similaire à ce que je demande ici. Pour récapituler la solution s'y trouve, il y a deux <div> s:

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

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

et il y a deux règles CSS qui emploient soit la résolution de l'écran maximum ou minimum:

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

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

Pour arriver au point, envisager un appareil avec une largeur minimale de 700px et une largeur maximale de 900px. Cela tomberait à travers les fissures de la logique CSS ci-dessus et n'entraînerait aucun <div> visible. Un autre exemple, un appareil allant de 500px à 750px ne serait pas non plus couvert.

Quelqu'un peut-il suggérer une approche complète pour éviter la faiblesse de la réponse référencée? Des solutions basées sur CSS seraient préférables ici.

Answer 1

Ce que vous pouvez utiliser est l'absence d'affichage dans la requête média. Utilisez les différentes classes assignées à chaque div comme mobile et de bureau puis dans la requête média pour le poste de travail .visiblephone {display: none;} et la requête pour mobile set .visible-desktop {display: none;}

veiller à ce que, dans votre support recommandé recherche un div sera toujours caché, vous avez juste pour obtenir vos valeurs de taille de l'écran =)

Answer 2

si je vous comprends bien, vous essayez de faire:

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