Un design réactif (responsive) grâce aux media queries
Dans un article posté récemment sur le blog Google Webmaster Central, l'équipe de Google présente leurs techniques pour réaliser un design réactif (responsive):
- Pour les conteneurs, utiliser max-width et min-height au lieu de width et height, pour que la page puisse s'adapter lorsque la taille de la fenêtre diminue
- Pour éviter que les images ne débordent de la fenêtre lorsque celle-ci est réduite, ajouter le code suivant à la feuille de style css:
img {
max-width: 100%;
}
- Les navigateurs de smartphones "simulent" généralement un écran plus grand. Pour les forcer à utiliser leur résolution réelle, il suffit d'ajouter dans la section head de la page html:
<meta name="viewport" content="width=device-width, initial-scale=1">
- Finalement, grâce aux media queries CSS3, il est possible d'ajouter du code css pour certaines tailles d'écran seulement:
/* Code CSS de base */
@media screen and (min-width:480px) and (max-width:800px) {
/* Tablettes, et smartphones disposant d'un grand écran */
}
@media screen and (max-width:479px) {
/* Autres smartphones */
}
