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

par Tychic Obanda


Programmation web | 11 commentaires



Besoin d'une carte Visa ? Procurez-vous la carte visa Fyatu à seulement 5$. Cliquez ici


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 ?

Medias Queries pour mobile first

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.


Tychic ObandaJe suis Tychic Obanda. Avant j'étais un simple visiteur des sites internet et aujourd'hui je suis devenu le créateur des sites internet. Passionné de l'internet et de la programmation, je publie sur ce site des astuces et tutoriels pour vous aider de mieux apprendre la programmation web et de vivre de cette passion.




Laisser un commentaire
Vous pouvez écrire en gras en utilisant * et en italique en utilisant _
951

11 commentaires

Kate
Kate

Merci beaucoup pour ces codes.
Je débute, que voulez vous dire sur la méthode 2 par "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." ?
Il faut rajouter un autre code ?

Répondre

JACQUES
JACQUES

bonjour à vou.Je suis ayissi onana étudiant en première année informatique.Je rencontre un problème avec mon site web que je suis entrain de créer .En faite j'ai déjà fini la création mais je ne parviens pas à rendre mon site responsive.

Répondre
<a href='http://www.243tech.com/tychic-obanda/'>Tychic Obanda</a>
Tychic Obanda

Salut cher Onana,

Si après la lecture de cet article tu n'arrives toujours pas rendre responsive ton site web, je te recommande de visionner quelques vidéos sur Youtube à ce sujet.

Parfois les vidéos sont plus claires que les écrits.

N'oublies pas de nous indiquer le lien de ton site si possible.


Destine Fedalson
Destine Fedalson

*Salut, merci pour le code, mon probleme, je voulais rendre mon site responsive, mais je n'arrive pas, sitou le menu deborde sur les smartphone, aide moi stp

Répondre
<a href='http://www.243tech.com/tychic-obanda/'>Tychic Obanda</a>
Tychic Obanda

Salut Destine,

A quel niveau te bloques-tu ?


Zizi
Zizi

Bonjour Tichic, merci pour cet article mais je tiens à approfondir le Web avec toi si possible écrivez moi sur mon WhatsApp 0818028750. merci

Répondre
<a href='http://www.243tech.com/tychic-obanda/'>Tychic Obanda</a>
Tychic Obanda

Veuillez utiliser la page de contact pour m'écrire https://www.243tech.com/contact


Free Spirit
Free Spirit

Je suis débutante dans l'intégration HTML/CSS, et je veux savoir comment définir les breakpoints des media query?
Et merci bcp pour ce trés bon tutoriel

Répondre
Free Spirit
Free Spirit

Hi Tychic,

Merci bcp pour votre réactivité et la clarté de votre réponse.Votre réponse m'a beacoup aidé.

<a href='http://www.243tech.com/tychic-obanda/'>Tychic Obanda</a>
Tychic Obanda

Hello Free!

Actuellement, Il est donc très compliqué de définir des breakpoints selon les résolutions d'affichage des appareils. La meilleure méthode est d'utiliser son navigateur pour afficher son site internet, de diminuer petit à petit la taille de la fenêtre afin de repérer les tailles pour lesquelles l'affichage ne fonctionne pas ou nécessite des ajustements : ce sont les breakpoints pour votre site.

Pour mettre en place un breakpoint, il suffit d'écrire une media query pour les tailles supérieures et une media query pour les tailles inférieures. Voici un exemple avec 320px :

@media only screen and (min-width: 321px) {
/ Appareils avec une résolution au-dessus de 320px /
}
@media only screen and (max-width: 320px) {
/ Appareils avec une résolution de 320 pixels ou moins /
}

Si j'ai été clair avec cette explication, j'attends votre retour...


Recherche

Bonus Gratuit

50 conseils aux blogueurs débutants et futurs blogueurs

Un ebook écrit pour vous montrer tout ce qu'il faut pour devenir développeur web

Avatar Tychic Obanda

Envie d'apprendre plus sur la création de sites web ? Vous êtes au bon endroit ! 172 articles publiés, 7751 commentaires ont été postés sur 243tech. Tout ce que vous cherchez se trouve certainement ici...