CSS Mediaqueries
La nouvelle propriété CSS3 mediaqueries définie les proprétés suivantes :
- dimensions du navigateur (largeur, hauteur et aspect ratio)
- dimensions du dispositif (dispositif de largeur, hauteur et dispositif-dispositif à rapport de format)
- orientation navigateur
- informations de couleur (couleur, couleur et monochrome index)
- spécifiques à l’appareil des détails tels que la résolution, si son affichage est grille ou bitmap basé, et le type de balayage (progressif ou entrelacé … applicable aux téléviseurs)
Ces propriétés ne sont pas toutes actuellement prises en charge par tous les navigateurs, mais beaucoup le sont.
@ L'écran multimédia et (max-width: 480px) {
background-color: red;
font-size: 1.5em;
}
Ce jeu de styles est uniquement appliqué à un écran qui est de 480 pixels de large ou moins.
Il n’y a pas de redirection vers une autre page, la page contient toutes les informations et ce sont les div qui s’adaptent à la dimension de l’écran. Le mediaqueries possede l’avantage d’économiser la bande passante et d’accélérer l’affichage de la page.
Quelques tutoriels utiles sur mediaqueries sont énumérées ci-après :
- Dispositions d’adaptation avec les demandes des médias par Aaron Gustafson
- Les questions des médias pour les appareils standards par CSS-Tricks
- Snippets Mediaquery par David Nemes
- Mediaqueries par SitePoint
- Tests Mediaquery
- Compatibilité CSS et Internet Explorer par MSDN
- css3-mediaqueries-js par Wouter van der Graaf
- Respond.js: Rapide CSS3 Requêtes médias pour Internet Explorer 8.6 et plus par Scott Jehl de Filament Group
Sources : http://www.saraproft.net/blog/?tag=css
