Créateur de thèmes WordPress :: Formateur :: Web Designer

CSS3 :: comprendre les media queries avec Chrome

Publié le : 

Modifié le : 

Par : 

Les sites « Responsive » deviennent incontournables en 2012. Par « Responsive » entendez tout site qui peut facilement s’adapter au contenu en se reposant sur la taille de la fenêtre du navigateur. Dans ce tutoriel, je me contenterai de vous donner quelques articles qui font référence et un moyen de peu à peu explorer la toile avec Chrome tout en intégrant le processus.

Quelques liens incontournables

Sur Webdesignerwall

Ailleurs

Outil de développement de Chrome

Le navigateur Chrome a un inspecteur de type « Firebug » intégré. Il suffit de placer le curseur sur la partie à inspecter et de lancer « Procéder à l’inspection de l’élément » (voir capture ci-dessous)

capture de Lancer l'inspection

Après avoir lancé cette opération, une nouvelle fenêtre s’ouvre en bas de votre fenêtre principale (voir capture qui suit).

capture de la Fenêtre inspecter

Observer les media queries sur un site

Avec le clic droit de la souris, inspecter un élément (ici la sidebar). Afficher la fenêtre de l’inspecteur à l’extérieur pour plus de confort en utilisant l’icône de gauche, en bas. Ici, je suis sur le site de Chris Coyier: css-trick.com Au moment où vous redimensionnez la fenêtre de votre navigateur, vous allez voir de nouveaux CSS qui apparaissent avec la media query qui correspond. Par exemple:

@media screen and (max-width: 1024px)
aside {
margin: 0;
width: 25%;
}

Ici, pour la taille de la fenêtre d’une largeur maximum de 1024px, la sidebar (ici « aside ») sera égale à 25% alors qu’elle était égale à 35% pour les fenêtres de 1200px. Voici une capture d’écran des différentes modulations:

capture de l'inspecteur de Chrome

Attention, il semble que cette fonctionnalité ne marche que dans les versions récentes de Chrome. J’utilise actuellement la version 20

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.