Ausgefallene Medienabfragen mit etwas WENIGER Magie

81

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!

Andre Zimpel
quelle
Mögliches Duplikat der Gruppierung
Medienabfragen
Aufgrund der Konversation in den Kommentaren zu @zzzzBov benötigen wir möglicherweise etwas mehr Klarheit in Ihrer Frage, was Sie erreichen möchten und wie Sie es erreichen möchten.
ScottS

Antworten:

234

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

Hai Nguyen
quelle
2
Das ist großartig, danke @Hai! Ein kleines Problem in Visual Studio ist, dass diese Warnmeldung bei Verwendung @mediaeiner .less-Datei generiert wird: " Unerwarteter '@' - Block in der Stilregel ". Es scheint jedoch kein Problem zu sein.
Ian Campbell
Warum kann ich das nicht @mediain die in Zeile 1 + 2 definierten Variablen ziehen ? ➪ bedauerlicherweise löst sich ein reines @tablet { ...dann nicht auf, während ein @media @tablet {...(was @medianatürlich zu einem Verdoppeln führt , wenn es in die Saite genommen wird.
Frank Nocke
116

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

Joseph Yancey
quelle
Nachdem ich dies gelesen hatte, fand ich diese Grunt-Aufgabe, um die MQs zu gruppieren, nachdem die verschachtelten MQs kompiliert wurden: github.com/buildingblocks/grunt-combine-media-queries Entfernt das Aufblähen.
Jazzy
Das ist schön und sauber. Kann ich fragen, warum das ~ vor "nur ...?
Anthony_Z
In LESS gibt eine Tilde ~ vor einem String-Literal den String unverändert aus, da es sich bei reinem LESS möglicherweise um einen Syntaxfehler handelt.
Joseph Yancey
1
Was ist, wenn Sie versuchen, eine Operation innerhalb dieser "Literalzeichenfolge" durchzuführen? Angenommen, ich möchte eine Variable verwenden, um die Bildschirmauflösung zu enthalten, zum Beispiel: Kann ich Folgendes tun: ~ "nur Bildschirm und (min-width: @mySize - 20px)". Ich weiß, dass es nicht funktioniert, aber wie geht das richtig?
Fablexis
44

+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;
    }
}
SunnyRed
quelle
Worum geht es in diesem "Strikt" genau? Nach dem, was Sie geschrieben haben, bin ich nicht in der Lage, das Konstrukt zu verstehen. Gibt es eine Quelle, auf die Sie mich verweisen könnten, um weitere Informationen zu diesem Thema zu erhalten?
Kevkong
1
Tatsächlich dienen die "strengen Abfragen" der Bequemlichkeit und sollten nur verwendet werden, wenn Ihr CSS ausschließlich auf einen einzelnen Bildschirmbereich angewendet werden soll. Wenn ich Mobile zuerst benutze (siehe z. B. zellwk.com/blog/how-to-write-mobile-first-css ), würde ich sagen, dass ihre Verwendung möglicherweise ein bisschen nach Design riecht und ich würde normalerweise versuchen, sie zu vermeiden . Abhängig von den Umständen möchten Sie möglicherweise, dass ein (schweres) CSS @tabletausschließlich darauf abzielt , und Sie möchten es nicht überschreiben, z. B. @desktopund / oder überschreiben @large. In diesen Fällen können Sie eine strikte Abfrage verwenden (hier @tablet-strict).
SunnyRed
9

Und Sie können auch solche Medienabfragen kombinieren

@media @desktop, @tablet, @ipad{ 

//common styles... 

}
Spicykimchi
quelle
7

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.

M_Willett
quelle
4

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;
  }
}
Atul Gupta
quelle
0
@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)";
Sanket Suthar
quelle
0

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;
      }
    }
Sunil Rajput
quelle