Nous avons brièvement vu comment changer la couleur du texte en fonction de la résolution du visiteur. Cependant changer les couleurs n'a pas grand intérêt et c'est généralement assez peu utilisé avec les requêtes médias.
En revanche, déplacer des éléments et changer leur taille pour reconstruire le design en fonction de la résolution du visiteur est très pratique.
Prenons un exemple tout bête. Si mon site web a une largeur de 900 pixels, toute configuration d'écran de moins de 900 pixels de large va poser des problèmes : on verra des barres de défilement s'afficher en bas pour scroller vers la droite ou vers la gauche.
Il faut donc utiliser une requête média pour modifier la mise en page du site pour les visiteurs dont la résolution d'écran est trop étroite pour voir tout le site d'un coup.
Voici notamment quelques modifications qu'il est courant d'effectuer :
changer les flottement d'éléments
changer les tailles d'éléments
changer l'alignement d'éléments
changer la position d'éléments
On pourra par exemple changer la taille d'un largeur fixe en pixels à la valeur "auto" qui indique au bloc de prendre toute la largeur disponible.
On pourra également faire passer un menu, généralement à côté du texte, en dessous du texte pour économiser de la place.
Et voilà, vous avez votre site web adapté aux navigateurs mobiles et aux petites résolutions.