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!
css
responsive-design
less
media-queries
Andre Zimpel
quelle
quelle
Antworten:
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. :) :)
quelle
@media
einer .less-Datei generiert wird: " Unerwarteter '@' - Block in der Stilregel ". Es scheint jedoch kein Problem zu sein.@media
in die in Zeile 1 + 2 definierten Variablen ziehen ? ➪ bedauerlicherweise löst sich ein reines@tablet { ...
dann nicht auf, während ein@media @tablet {...
(was@media
natürlich zu einem Verdoppeln führt , wenn es in die Saite genommen wird.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).
quelle
+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 interpolation
und 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; } }
quelle
@tablet
ausschließlich darauf abzielt , und Sie möchten es nicht überschreiben, z. B.@desktop
und / oder überschreiben@large
. In diesen Fällen können Sie eine strikte Abfrage verwenden (hier@tablet-strict
).Und Sie können auch solche Medienabfragen kombinieren
@media @desktop, @tablet, @ipad{ //common styles... }
quelle
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.
quelle
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; } }
quelle
@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)";
quelle
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; } }
quelle