Responsive Design et Media Queries

Responsive Design et Media Queries

Tags : CSS, Navigateur
Catégorie : Programmation
Mise en ligne : 24 Avril 2013 à 00:00

Si vous n\'avez pas envie de faire un site mobile à part et devoir refaire un style CSS totalement autre ou bien utiliser jQuery Mobile, vous pouvez vous documenter sur le Responsive Design et les media queries.

Alors vous allez me dire :

Mais qu\'est-ce que le resposive design et les media queries ?

C\'est simple, se sont des nouvelles règles CSS spécialement destiné pour les media (écrans). Oui car vous devez le savoir si vous faire des pages qui doivent être imprimés, il existe aussi le type \"print\". Bref, cela vous permet de rendre un site disponible sur écran de PC, sur un écran mobile en quelques minutes. Vous pouvez avoir un exemple avec mon blog. Essayez de réduire la taille de la fenêtre de votre navigateur afin de voir ce que cela donne.

Vous avez vu ? Sans rien recharger, le site s\'est automatiquement adapté à la largeur du navigateur. Alors pour cela il faut procédé comme ceci :

Mettre dans votre balise head le petit code suivant :

NAME=\"VIEWPORT\" CONTENT=\"WIDTH=DEVICE-WIDTH, INITIAL-SCALE=1.0\">

Il permet de forcer la largeur de l\'affichage à la largeur de l\'écran du terminal. La deuxième propriété permet forcer l\'échelle initiale à 1.0.

Bien sûr, juste cela ne permet de faire un site responsive. Il faut aussi redéfinir les propriétés CSS en fonction de la taille de l\'écran. Le responsive est vraiment quelque chose d\'important qu\'il faut réfléchir en même temps que la programmation de votre site. Si vous ne voulez pas passer beaucoup de temps et réécrire toutes les règles CSS en fonction de toutes les tailles d\'écrans vous avez intérêt à le faire en pourcentage. Si comme moi vous ne l\'avez pas pensé avant, ce n\'est pas grave, vous passez juste plus de temps pour le terminer.

Pour le CSS, il faut jouer avec la propriété max-width et la clause @media (d\'où le nom media queries) :

@media (max-width: 768px) {
     /* VOTRE CODE CSS */
}

@media (max-width: 640px) {
     ...
}

@media (max-width: 480px) {
     ...
}

@media (max-width: 340px) {
     ...
}

Je vous ai mis les plus utlisés, mais il en existe une multitude, d\'où l\'importance de mettre le bout de code que je vous ai donné qui est à mettre dans le . 

 

Pour finir, il faut tester son code, si vous n\'avez pas de terminaux pour tester je vous conseille l\'extension Firefox (https://addons.mozilla.org/fr/firefox/addon/web-developer/?src=search) et Chrome (https://chrome.google.com/webstore/detail/web-developer/bfbameneiokkgbdmiekhjnmfkcnldhhm?hl=fr) Web Developer  qui vous permettra de redimensionner facilement la taille du navigateur. Alors attention, je me suis aperçu qu\'elle pose un petit problème, elle ne prend pas en compte la taille des ascenseurs.

Si vous n\'avez pas envie d\'installer l\'exension, vous avez ce site http://responsive.victorcoulon.fr/. Faite un drag&drop du bouton qui est sur le site, vers le site à tester.

\"http://www.babeuloula.fr/blog/fichiers/images/reponsive.png\"

Vous pouvez tester en direct les principaux écrans (tablette portait et paysage, téléphone portrait et paysage). Vous pouvez aussi voir ce que donne votre site avec un clavier virtuel afin de vous rendre compte si votre contenu passe bien.

Vous voilà maintenant avec un magnifique site mobile et compatible.

Si vous avez des questions n\'hésitez pas à les poster en commentaire.

<Laisser un commentaire/>

* Champs obligatoire