Modifier le float via des media queries?

Bonjour,

est-il possible d'insérer plusieurs media queries dans une class afin de modifier le float?

Par exemple, quelque chose comme ceci:

@media screen and (min-width: 760px) {
.float{
float:left;
clear:none;
}
}

@media screen and (max-width: 760px) {
.float{
float:none;
clear:both;
}
}

Merci,
Annelise

Salut,

Oui, c'est possible.

Cela dit, l'une des deux media queries est superflue (après, tout dépend du contexte) : dans l'approche d'adaptation (penser d'abord au desktop, aux petits écrans ensuite), je coderais comme suit :

.float {
  float: left; /* clear: none à n'ajouter qu'en cas de nécessité, vu que none est sa valeur par défaut */
}

@media screen and (max-width: 760px) {
  .float {
    float: none;
    clear: both;
  }
}

ou comme suit, dans une approche mobile first :

/* À noter que j'inverse l'ordre des règles CSS dans le cas de l'approche mobile first */

/* Pour petits écrans */
.float {
  clear: both; /* float: none inutile, vu que none est la valeur par défaut de la propriété float */
}

/* Pour les plus grands */
@media screen and (min-width: 760px) {
  .float {
    float: left;
    clear: none;
  }
}

Modifié par Victor BRITO (07 Feb 2013 - 14:59)