article
seize-1A10 à créé cet article le 8 juin 2018

CSS Les medias queries - Les Breakpoints

Voici des exemples d'utilisation des "media queries" avec les breakpoint correspondant aux ordinateurs de bureaux, portables, tablettes et smartphones
Vous avez trouvé cet article utile ?
-
0
2
+

Mots clés :
media queriescss


/*
On va définir des colonnes :
4 colonnes sur les écrans d'ordinateur (écrans larges)
2 colonnes pour les écran allant de 600px à 992px
1 seule colonne sur les petits écrans
*/

/* Le style général */
.col {
  float: left;
  width: 25%;
}


/* pour les écrans de 992px de large ou moins - On passe à 2colonnes */
@media screen and (max-width: 992px) {
  .col {
    width: 50%;
  }
}

/*  pour les écrans de 600px de large ou moins - On affiche une seule colonne  */ 
@media screen and (max-width: 600px) {
  .col {
    width: 100%;
  }
}
/* Breakpoint d'apres Bootstrap */

    /* Ecran large */ 
    @media only screen and (max-width : 1200px) {
        /* Ecrire le style specifique à ces écrans */
    }
    
    /* petits écrans ordinateurs de bureau */ 
    @media only screen and (max-width : 992px) {

    }

    /* Tablettes */
    @media only screen and (max-width : 768px) {

    }

    /* Smartphones */ 
    @media only screen and (max-width : 480px) {

    }

    /* Smartphones à petits écrans */ 
    @media only screen and (max-width : 320px) {

    }











Créer une branche
Utilisez cet article comme base pour en créer une version différente