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😆
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.
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.
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)" />
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.
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*/
}
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.
Je 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.
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.
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.
*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
Salut Destine,
A quel niveau te bloques-tu ?
Bonjour Tichic, merci pour cet article mais je tiens à approfondir le Web avec toi si possible écrivez moi sur mon WhatsApp 0818028750. merci
Veuillez utiliser la page de contact pour m'écrire https://www.243tech.com/contact
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
Hi Tychic,
Merci bcp pour votre réactivité et la clarté de votre réponse.Votre réponse m'a beacoup aidé.
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...
Un ebook écrit pour vous montrer tout ce qu'il faut pour devenir développeur web