Quelques liens sur les Media Queries en CSS3

Les grilles de mise en page et les frameworks CSS qui les accompagnent sont bien jolis mais pas toujours adaptés à la modernité du Web composée d’agents utilisateurs aussi nombreux que différents. Une grille modulaire devrait faire face à toutes les situations. Les Media Queries permettent de cibler un agent utilisateur selon certains paramètres. Il devient possible d’utiliser une grille visible uniquement par : les personnes qui naviguent depuis un ordinateur de bureau avec une largeur d’écran supérieure à 1024 pixels ; celles qui utilisent leur Netbook (possédant une résolution inférieure ou égale à 1024 pixels de large) ; ainsi que par celles qui parcourent le web depuis leur iPhone, leur iPad ou leur téléphone Android. Il est même possible de spécifier des règles CSS différentes selon que l’appareil est utilisé en mode portrait ou en mode paysage !

CSS3 Media Queries

Grilles adaptatives

  • Skeleton — A Beautiful Boilerplate for Responsive, Mobile-Friendly Development
  • columnal — A responsive CSS grid system helping desktop and mobile browsers play nicely together.
  • Responsive Grid SystemsA Conceptual Framework for Extending Upon the Functionality of 960.gs

Polyfills

  • css3-mediaqueries-js
  • Respond — A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more), by Scott Jehl.
  • mediatizr — Responsive-oriented CSS3 media queries polyfill, by Aurélien Delogu.
  • matchMedia — A standardized way to check media query matching in script, by Scott Jehl, Paul Irish, Nicholas Zakas.
  • jQuery Media Helpers — Some media query and cross-browser responsive design helpers, abstracted from jQuery Mobile, by Scott Jehl.