CSS 3 : Rendre un site responsive design avec les Medias Queries

par Tychic Obanda

---

Programmation web | 11 commentaires

---

Vous avez entendu parler de Media Queries et vous cherchez à comprendre comment ça marche? Vous n'avez plus à se plaindre.

Il se peut que vous êtes entrain de développer votre site web et du coup vous remarquez que le site n'est pas adapté à l'affichage mobile ou tablette ? Vous cherchez à rendre votre site responsive design ou Mobile-Friendly? Ne vous cassez plus la tête car cet article répond à ce que vous cherchez.

Vous allez tout comprendre ici.

Créer un site web paraît dans le début comme un petit problème car avec les langages comme HTML et CSS, vous pouvez facilement créer un site statique et le montrer à ces amis pour qu'ils vous prennent pour un bon webmaster.

Mais le problème se pose quand votre site doit être visité depuis un téléphone, une tablette ou un ordinateur de petit écran😳. À ce niveau, vous allez vous rendre compte que vous avez encore du travail à faire avec votre site.

Donc, il faut adapter l'affichage de votre site sur toutes les tailles d'écrans car les internautes n'utilisent pas uniquement des ordinateurs pour accéder à Internet. Ce temps est déjà révolu.

Si en 2008 l'ordinateur était le principal outil pour accéder à Internet, ce n'est plus le cas pour aujourd'hui car nous pouvons actuellement utilisée nos téléphones portables pour y accéder.

Vous, entant que webmaster, vous devez savoir que la majeur partie internautes aujourd'hui utilisent des téléphones mobiles. D'où, vous devez à tout prix adapter votre site à l'affichage mobile.

Dans cet article, je vous montre comment le faire. Vous verrez que c'est un jeu d'enfants mais ça demande du temps et de la réflexion.

Je suppose que vous avez des connaissances en CSS et HTML car nous allons toucher à ces deux langages. Et je profite pour demander aux âmes sensibles aux codes de s'abstenir😆

C'est quoi les Medias Queries ?

Les Medias Queries sont des nouvelles fonctionnalités ajoutées à CSS 3 et qui permettent aux webmaster d'adapter le contenu du site sur les différentes résolutions d'écran afin que la page web soit bien affichée.

Il ne s'agit pas de pas de nouvelles propriétés CSS mais de regles que l'on peut appliquer dans certaines conditions. Concretement, vous allez pouvoir dire "Si la résolution d'écran du visiteur est inférieur à tant, alors applique les propriétes suivantes".

Cela vous permet donc de changer l'apparence du site dans certaines conditions : vous pouvez augmenter la taille du texte, changer la couleur du fond, positionner différement votre menu dans certaines résolution, etc.

Comment appliquer les Medias Queries

L'utilisation des Medias Queries est tellement simple à tel point que vous allez adorer tout de suite. Il y a donc deux methodes pour utiliser les Medias Queries. Je vous présente les deux methodes dans cet article. Libre à vous de choisir laquelle utiliser dans vos projets.

Méthode 1

Ici, nous allons utiliser donc le langage CSS et HTML. On sait que pour ajouter une feuille de style dans une page HTML, on utilise la balise <link /> avec deux attributs rel et href. Mais on va donc ajouter un nouvel attribut, media.

Code HTML

<link rel="stylesheet" href="style.css" media="(min-width:1px) and (max-width:768px)" />

• l'attribut rel precise qu'il s'agit d'une feuille de style pour la balise link;
• href donne le chemin où se trouve le fichier .css;
• l'attribut media, c'est lui qui précise les regles à appliquer au cas où la largeur d'écran du visiteur est entre 1px à 768px.

Dans cet exemple, la feuille de style sera appliqué sur tous les écrans inférieurs ou égales à 768px de largeur. Donc si vous désirez cibler plusieurs types d'écran, il faut créer plusieurs fichiers CSS.

Méthode 2

La deuxième méthode vient en fait simplifier le travail car vous n'aurez plus à créer plusieurs fichiers CSS pour appliquer les medias queries.

Avec la deuxième methode, il sera question de créer un seul fichier CSS auquel on mettra les regles de medias queries.

La regle à utiliser ici est @media

Code CSS

@media (min-width: 320px) AND (max-width: 800px)
{
/* Les codes CSS */
}
@media (min-width: 800px) AND (max-width: 960px)
{
/* Les codes CSS*/
}

• Avec cette méthode, on cible les dimensions d'écran(min-width & max-width) de 320px à 800px et on applique les propriétés CSS.
• Après avoir ciblé les dimensions d'écran des visiteurs, il faut ensuite faire vos mises en forme afin d'adapter votre site à toutes les résolutions d'ecran.

Conclusion

Le Medias Queries sont loin d'être utilisé uniquement pour les résolutions d'écran. Avec les Medias Queries, on peut définir le zoom sur une page, définir l'orientation d'une page, etc.

Rencontrez-vous toujours des difficultés pour utiliser les Medias Queries sur vos projets web, dites-les mois dans les commentaires.

---

11 commentaires