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

par Tychic Obanda


Posté le 17-11-2018 à 07:42 | Programmation web | 5



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.

Restons en contact ! Retrouvez-moi sur : Yonaye | Facebook | Whatsapp | Twitter |


Tychic ObandaSalut, Mbote! Je m'appelle 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.









Voulez-vous apprendre la programmation web ?

Inscrivez-vous à la Newsletter et recevez mes ressources gratuites (guides PDF, checklists, etc.) pour programmeurs, webmasters et blogueurs.







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

5 commentaires

Zizi
Zizi
25-11-2018 à 08:22

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
25-11-2018 à 10:34

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


Free Spirit
Free Spirit
17-11-2018 à 12:57

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
17-11-2018 à 16:05

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
17-11-2018 à 14:50

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...


Voulez-vous apprendre la programmation web ?

Inscrivez-vous à la Newsletter et recevez mes ressources gratuites (guides PDF, checklists, etc.) pour programmeurs, webmasters et blogueurs.

Recherche
M'écrire sur Whatsapp

Cliquez sur l'image ci-dessous pour entrer en contact avec moi sur Whatsapp. J'aimerais vraiment échanger avec vous!!!

Contactez Tychic Obanda sur Whatsapp

Avatar Tychic Obanda

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