Ausgefallene Medienabfragen mit etwas WENIGER Magie

Es wäre schön, CSS-Stile für verschiedene Auflösungen innerhalb einiger CSS-Klassen mit weniger zu verpacken.

Ich möchte etwas tun wie:

footer {
  width: 100%;
}

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

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

Am Ende sollte so etwas das Ergebnis sein:

footer {
  width: 100%;
}

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

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

.tablet könnte irgendwie so aussehen:

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

  }
}

Hoffe jemand hat eine schöne Idee!

Folgendes habe ich in meinen Projekten getan:

@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;
  }
}

Auf diese Weise können Sie Ihre Medienabfragen nur einmal definieren und in weniger Dateien verwenden. Auch etwas leichter zu lesen. :) :)

Ich stimme der Antwort von Hai Nguyen (die akzeptiert wurde) voll und ganz zu, aber Sie können sie ein bisschen mehr aufräumen, indem Sie so etwas tun:

@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;
  }
}

Es ist im Wesentlichen dasselbe, aber Sie können Ihre Medienabfragen in der ursprünglichen Auswahl verschachteln. Es hält alle CSS für ein bestimmtes Element zusammen und macht Ihre Stile viel modularer (im Vergleich zum Split-Breakpoint-Ansatz).

+1 für Nguyen und Yancey - und noch eine Ergänzung.

Wenn Sie die Breiten explizit definieren möchten , können Sie dies mit string interpolationund Variablen für Ihre Haltepunkte erreichen. Hier zum Beispiel mit denen von Bootstrap - die strengen Regeln sollen verhindern, dass sich Definitionen definieren.

@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;
    }
}

Und Sie können auch solche Medienabfragen kombinieren

@media @desktop, @tablet, @ipad{ 

//common styles... 

}

Wir verwenden ein Setup wie folgt:

@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(); } };

Sie müssen nur Variablen festlegen, die Mixins erledigen den Rest, sodass die Wartung sehr einfach und dennoch flexibel ist:

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

Es ist erwähnenswert, dass diese Technik zwar sehr einfach ist, Ihre CSS-Ausgabe jedoch bei schlechter Verwendung voller Medienabfragen ist. Ich versuche, meine Medienabfragen auf 1 pro Haltepunkt pro Datei zu beschränken. Wo eine Datei header.less oder search.less wäre.

Hinweis: Diese Methode wird wahrscheinlich nur kompiliert, wenn Sie den Javascript-Compiler verwenden.

Ich benutze diese Mixins & Variablen

.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;

Also das

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

wird

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;
  }
}

@highdensity:  ~"only screen and (-webkit-min-device-pixel-ratio: 1.5)",
               ~"only screen and (min--moz-device-pixel-ratio: 1.5)",
               ~"only screen and (-o-min-device-pixel-ratio: 3/2)",
               ~"only screen and (min-device-pixel-ratio: 1.5)";

@mobile:        ~"only screen and (max-width: 750px)";
@tab:       ~"only screen and (min-width: 751px) and (max-width: 900px)";
@regular:        ~"only screen and (min-width: 901px) and (max-width: 1280px)";
@extra-large:  ~"only screen and (min-width: 1281px)";

Und das habe ich für mein Projekt verwendet:

    @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;
      }
    }