web-dev-qa-db-fra.com

masquer la balise div sur la vue mobile uniquement?

Je crée une mise en page fluide pour un site. J'essaie de masquer le contenu d'un <div> ou de l'intégralité du <div> dans la vue mobile, mais pas la vue de la tablette et du bureau.

Voici ce que j'ai jusqu'à présent ...

#title_message {
    clear: both;
    float: left;
    margin: 10px auto 5px 20px;
    width: 28%;
    display: none;
}

L’affichage est réglé sur «aucun» pour la disposition mobile et défini en tant que bloc sur les dispositions de tablette/bureau ... Existe-t-il un moyen plus simple de le faire, ou est-ce vrai?

cssfluid-layout
48
KoldTurkee

Vous aurez besoin de deux choses. Le premier est @media screen pour activer le code spécifique à une certaine taille d’écran, utilisé pour la conception adaptative. La seconde est l'utilisation de l'attribut visibility: hidden. Une fois que le navigateur/l'écran atteint 600 pixels, #title_message sera masqué.

@media screen and (max-width: 600px) {
  #title_message {
    visibility: hidden;
    clear: both;
    float: left;
    margin: 10px auto 5px 20px;
    width: 28%;
    display: none;
  }
}

EDIT: si vous utilisez un autre CSS pour mobile, ajoutez simplement le visibility: hidden; à #title_message. J'espère que cela vous aide!

117
Matt
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { #title_message { display: none; }}

Ce serait pour un design réactif avec une seule page pour un écran d'iphone en particulier. Acheminez-vous réellement vers une autre page mobile?

3
Scarecrow

Définissez la propriété display sur none comme valeur par défaut, puis utilisez une requête multimédia pour appliquer les styles souhaités à la div lorsque le navigateur atteint une certaine largeur. Remplacez 768px dans la requête du média par la valeur px minimale où votre div doit être visible.

#title_message {
    display: none;
}

@media screen and (min-width: 768px) {
    #title_message {
        clear: both;
        display: block;
        float: left;
        margin: 10px auto 5px 20px;
        width: 28%;
    }
}
2
Phil Sinatra

Vous pouvez être guidé par cet exemple. Sur votre fichier css:

.deskContent {
    background-image: url(../img/big-pic.png);
    width: 100%;
    height: 400px;
    background-repeat: no-repeat;
    background-size: contain; 
}

.phoneContent {
    background-image: url(../img/small-pic.png);
    width: 100%;
    height: 100px;
    background-repeat: no-repeat;
    background-size: contain;
}

@media all and (max-width: 959px) {
    .deskContent {display:block;}
    .phoneContent {display:none;}
}

@media all and (max-width: 479px) {
    .deskContent {display:none;}
    .phoneContent {display:block;}
}

Sur votre fichier html:

<div class="deskContent">Content for desktop</div>
<div class="phoneContent">Content for mobile</div>
1
J.C. Gras

La solution proposée ne fonctionnait pas pour moi sur le bureau, elle montrait simplement les deux divs, bien que le mobile ne montre que le div mobile J'ai donc fait une petite recherche et trouvé l'option min-width. J'ai mis à jour mon code à celui-ci et cela fonctionne très bien maintenant :)

CSS:

    @media all and (min-width: 480px) {
    .deskContent {display:block;}
    .phoneContent {display:none;}
}

@media all and (max-width: 479px) {
    .deskContent {display:none;}
    .phoneContent {display:block;}
}

HTML:

<div class="deskContent">Content for desktop</div>
<div class="phoneContent">Content for mobile</div>
1
Steve Hall

essaye ça

@media handheld{
    #title_message { display: none; }
}
0
Alejandro Ruiz Arias

je viens de changer de poste et de travailler pour moi (affichage uniquement sur mobile)

<style>
 .MobileContent {

     display: none;
	 text-align:center;

 }

@media screen and (max-width: 768px) {

 .MobileContent {

     display:block;

 }

}
</style>
<div class="MobileContent"> Something </div>

0
Carlos franco