Utiliser les medias queries en css3

Utiliser les medias queries en css3

2019-05-09 Niveau: Intermédiaire

C'est quoi les medias queries?

 Et bien ils servent à

  • agrandir la taille du texte
  • agrandir la taille des contrôles et zones cliquables (pour une utilisation au doigt)
  • faire passer le contenu sur une seule colonne
  • masquer ou afficher des éléments spécifiques
  • ajuster les dimensions et marges

 

Voici un petit example si on veut faire disparaitre un élément sur les mobiles seulement, en CSS nous avons des classes, personnellement je crée une classe .notonmobile à display:none que je place dans une media query (voir plus bas)

 

Voici l'élément que je veux faire disparaitre sur les mobiles par example ce div

<div>élément à faire disparaitre</div>

Je vais lui ajouter ma classe.

<div class="notonmobile">élément à faire disparaitre</div>

Ensuite je définis cette classe dans une medias query qui cible les écrans de 1000px et moins donc dans mon fichier css :

@media only screen and (min-width : 1px) and (max-width : 1000px) {
 .notonmobile{
   display: none;
  }
}

De cette façon mon div ne s'affichera pas sur les mobiles et les tablettes, facile non ?

Voici un example:

pasenmobile        enmobile

 

Le div est disparu sur les mobiles.

 

le code au complet :

<!DOCTYPE html>
<html>
<body>

<?php include 'header.php';?>

<style>
@media only screen and (min-width : 1px) and (max-width : 1000px) {
 .notonmobile{
   display: none;
  }
}
</style>
      
        <div class="container">

          <div class="notonmobile">élément à faire disparaitre</div>

        </div>
      

  <?php include 'footer.php';?>


</body>

</html>

 

Visitez ce site pour voir les medias queries de tous les appareils si vous voulez en cibler un en particulier:

https://css-tricks.com/snippets/css/media-queries-for-standard-devices/

 

Sinon vous pouvez créer vos propre medias queries , ex: J'ai un bug d'affichage dans mon menu lorsque je rapetisse mon navigateur avec la souris, donc ce bug sera probablement présent sur les mobiles! Nous devons corriger ça.

 

1- Je vais sur ce site pour connaitre la grandeur de mon écran la ou le bug se produit.

http://howbigismybrowser.com/

2- je crée une medias queries dans mon fichier css comme ceci

@media only screen and (min-width : 1px) and (max-width : 573px) {
  #topmenu{
      margin-top:50px;
  }
}

Vous comprenez le principe.

 


Laissez nous un commentaire