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

par Tychic Obanda


Programmation web | 5 commentaires



Bienvenue à nouveau sur mon blog ! De nature, je suis du genre à offrir des cadeaux à ceux qui me sont fidèles. Je t'offre alors l'extrait de mon ebook : 50 conseils aux blogueurs débutants et futurs blogueurs. Clique ici pour recevoir l'ebook. Merci d'être arrivé sur mon blog !


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




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

5 commentaires

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
Site hébergé chez Ikoula

Mon site est hébergé chez Ikoula. Un hebergeur web de qualité et si vous cherchez à mettre votre site en ligne, cliquez ici pour profiter de l'offre de 0,99€ par mois !

Logo hébergeur web Ikoula

Extrait : 50 conseils aux blogueurs

50 conseils aux blogueurs débutants et futurs blogueurs

Besoin d'apprendre plus sur le Blogging ? Dans cet ebook, je vous donne 50 conseils que tous les débutants en Blogging aimeriaient écouter avant de se lancer.

Ebook : Mes grosses erreurs en Blogging

50 conseils aux blogueurs débutants et futurs blogueurs

Cet ebook contient les erreurs à éviter quand on souhaite se lancer dans le Blogging. Il vaut de l'or et téléchargez-le dès maintenant.

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 ! 120 articles publiés, 816 commentaires ont été postés sur 243tech. Tout ce que vous cherchez se trouve peut-être ici...