Media Queries in LESS
Lassen Sie uns eine Funktion erstellen, die einem Element ein Media Query hinzufügt. Nehmen wir als Beispiel eine Abfrage, die die Stile für Mobile Geräte steuert. Nennen wir unsere Funktion entsprechend:
.mobile(@code) {
}
Unsere Funktion wird einen Codeblock als Parameter entgegennehmen. Lassen Sie uns diesen Block innerhalb des Media Queries ausgeben:
.mobile(@code) {
@media (max-width: 600px) {
@code();
}
}
Nutzen wir nun unsere Funktion:
div {
.mobile({
width: 300px;
});
}
Als Ergebnis wird nach dem Kompilieren unser div innerhalb des Media Queries liegen und die entsprechenden Stile erhalten:
@media (max-width: 600px) {
div {
width: 300px;
}
}
Erstellen Sie eine Funktion tablet, die
Stile für Tablets festlegt.
Erstellen Sie eine Funktion gadget, die
Stile für Handys und Tablets festlegt.
Erstellen Sie eine Funktion notebook, die
Stile für Laptops festlegt.
Erstellen Sie eine Funktion desktop, die
Stile für Desktops festlegt.
