Fancy Media Queries avec un peu de magie LESS

Question

Il serait bien d’envelopper css-styles pour différentes résolutions dans certaines classes css en utilisant moins.

J'aimerais faire quelque chose comme:

 footer {
  width: 100%;
}

.tablet {
  footer {
    width: 768px;
  }
}

.desktop {
  footer {
    width: 940px;
  }
}
 

À la fin, quelque chose comme ceci devrait être le résultat:

 footer {
  width: 100%;
}

@media screen and (min-width: 768px) {
  footer {
    width: 768px;
  }
}

@media screen and (min-width: 992px) {
  footer {
    width: 940px;
  }
}
 

.tablet pourrait ressembler à ceci:

 @media screen and (min-width: 768px) {
  .tablet {

  }
}
 

J'espère que quelqu'un a une bonne idée!

Answer 1

Voici ce que j'ai fait dans mes projets:

 @desktop:   ~"only screen and (min-width: 960px) and (max-width: 1199px)";
@tablet:    ~"only screen and (min-width: 720px) and (max-width: 959px)";

@media @desktop {
  footer {
    width: 940px;
  }
}

@media @tablet {
  footer {
    width: 768px;
  }
}
 

Cela vous permet de définir vos requêtes multimédia une seule fois et de les utiliser dans vos fichiers moins nombreux. Aussi un peu plus facile à lire. :)

Answer 2

Je suis tout à fait d'accord avec la réponse de Hai Nguyen (qui a été acceptée) mais vous pouvez éclaircir un peu plus en faisant quelque chose comme ceci:

 @desktop:   ~"only screen and (min-width: 960px) and (max-width: 1199px)";
@tablet:    ~"only screen and (min-width: 720px) and (max-width: 959px)";

footer{
  width: 100%;
  @media @tablet {
    width: 768px;
  }
  @media @desktop {
    width: 940px;
  }
}
 

C'est essentiellement la même chose, mais vous permet d'imbriquer vos requêtes multimédia dans le sélecteur d'origine. Il conserve l'ensemble des css d'un élément spécifique et rend vos styles beaucoup plus modulaires (par rapport à l'approche des points de rupture fractionnés).

Answer 3

+1 pour Nguyen et Yancey - et un ajout de plus.

Si vous voulez une définition explicite des largeurs, vous pouvez le faire avec string interpolation et des variables pour vos points d'arrêt. Ici, par exemple avec ceux de bootstrap - les règles strictes sont d'empêcher le chevauchement des définitions.

 /* 
   setup
*/

@xs-min: 480px;
@sm-min: 768px;
@md-min: 992px;
@lg-min: 1200px;

@xs-max: (@sm-min - 1);
@sm-max: (@md-min - 1);
@md-max: (@lg-min - 1);

@phone:          ~"only screen and (min-width: @{xs-min})";
@phone-strict:   ~"only screen and (min-width: @{xs-min}) and (max-width: @{xs-max})";
@tablet:         ~"only screen and (min-width: @{sm-min})";
@tablet-strict:  ~"only screen and (min-width: @{sm-min}) and (max-width: @{sm-max})";
@desktop:        ~"only screen and (min-width: @{md-min})";
@desktop-strict: ~"only screen and (min-width: @{md-min}) and (max-width: @{md-max})";
@large:          ~"only screen and (min-width: @{lg-min})";

/* 
   usage
*/

footer{
    width: 100%;
    @media @tablet {
        width: 768px;
    }
    @media @desktop {
        width: 940px;
    }
}