Tuto CSS-SASS

Les media queries

Comment créer un site web responsive avec les media-queries? Les media queries sont des méthodes qui permettent d'appliquer des styles différents à une page web en fonction de la taille de l'écran.

Exemple écran desktop

/*Code CSS*/
@media all and (min-width: 900px)
{
    .test-responsive{font-size:30px;}
}

<!--Code HTML-->
<p class="test-responsive">Ce texte sera affiché dans une taille de 30px si la largeur de l'écran fait au moins 900px</p>

Exemple écran mobile

/*Code CSS*/
@media all and (max-width: 900px)
{
   .test-responsive{ font-size:16px;}
}

<!--Code HTML-->
<p class="test-responsive">Ce texte sera affiché dans une taille de 16px si la largeur de l'écran fait moins de 900px</p>