web-dev-qa-db-fra.com

Fancy Media Queries avec un peu de magie LESS

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!

css3responsive-designlessmedia-queries
78
Andre Zimpel

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. :)

218
Hai Nguyen

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 d'arrêt fractionnés).

110
Joseph Yancey

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

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

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

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

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

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

Et vous pouvez également combiner des requêtes multimédia comme celle-ci

@media @desktop, @tablet, @ipad{ 

//common styles... 

}
8
kedomonzter

J'utilise ces mixins et variables

.max(@max; @rules){@media only screen and (max-width: (@max - 1)){@rules();}}
.min(@min; @rules){@media only screen and (min-width: @min){@rules();}}
.bw(@min; @max; @rules){@media only screen and (min-width: @min) and (max-width: (@max - 1)){@rules();}}

@pad: 480px;
@tab: 800px;
@desktop: 992px;
@hd: 1200px;

Donc ça

footer{
    width: 100%;
    .bw(@tab,@desktop,{
        width: 768px;
    });
    .min(@desktop,{
        width: 940px;
    });
}

devient

footer {
  width: 100%;
}
@media only screen and (min-width: 800px) and (max-width: 991px) {
  footer {
    width: 768px;
  }
}
@media only screen and (min-width: 992px) {
  footer {
    width: 940px;
  }
}
4
Atul Gupta

Nous utilisons une configuration comme celle-ci:

@vp_desktop:    801px;
@vp_tablet:     800px;
@vp_mobile:     400px;

.OnDesktop(@rules) { @media screen and (min-width:@vp_desktop){ @rules(); } };
.OnTablet(@rules) { @media screen and (max-width:@vp_tablet){ @rules(); } };
.OnMobile(@rules) { @media screen and (max-width:@vp_mobile){ @rules(); } };

Il vous suffit de définir des variables, les mixins gèrent le reste, il est donc très facile de le maintenir tout en restant flexible:

div {
  display: inline-block;
  .OnTablet({
    display: block;
  });
}

Il est à noter que bien que cette technique soit très simple, si elle est mal utilisée, votre sortie CSS sera pleine de requêtes multimédia. J'essaie de limiter mes requêtes multimédia à 1 par point d'arrêt, par fichier. Où un fichier serait header.less ou search.less.

N.B. Cette méthode ne sera probablement pas compilée sauf si vous utilisez le compilateur javascript.

3
M_Willett

Et voici ce que j'ai utilisé pour mon projet:

    @mobile:   ~"only screen and (min-width: 320px) and (max-width: 767px)";
    @tablet:    ~"only screen and (min-width: 768px) and (max-width: 991px)";
    @ipad:    ~"only screen and (min-width: 992px) and (max-width: 1024px)";

    @media @mobile {
      .banner{
        width: auto;
      }
    }

    @media @tablet {
      .banner{
        width: 720px;
      }
    }

  @media @ipad {
      .banner{
        width: 920px;
      }
    }
0
Sunil Rajput