Media Queries zusammenfassen?

Mµ · Mµ » 10.02.2016, 07:13 **Media Queries zusammenfassen?**

Hallo Leute, ich habe da ein Menü, welches bei unterschiedlichen Voraussetzungen vom Mouse-Over ins bereits ausgeklappte umgewandelt werden soll. Per Media Queries kein Problem. Zusätzlich frage ich per Javascript ab, ob ein Touchscreen genutzt wird und dann wird eine Platzhalter-ID ersetzt durch "touchscreen". Das sieht dann im Stylesheet so aus:

@media screen and (max-width:500px)
{
.klasse1 {eigenschaftA}
}

@media screen and (max-height:500px)
{
.klasse1 {eigenschaftA}
}

#touchscreen .klasse1 {eigenschaftA}

Es geht also immer um die selbe Klasse und auch um die selbe Eigenschaft.

Natürlich gibt es in der Praxis deren vieler (aber immer gleich) und ich würde dies gerne verkürzen bzw. die Inhalte nur einmal schreiben.

Kann man das vielleicht irgendwie zusammen fassen? Dies würde den Code übersichtlicher gestalten und ich müsste bei Änderungen nicht alles doppelt gemoppelt korrigieren.

Grüße,
Thomas

nerd · **nerd** » 10.02.2016, 23:47 **Media Queries zusammenfassen?**

Hallo,

zusammenfassen wie du es willst geht imho nicht, aber man kann es besser machen:

Ich nehme mal an, dass du fuer mobile-first entwickelst? In diesem falle wuerde ich mit dem kleinsten screen anfangen, und dort die grundeigenschaften (farben, schriftarten, border, text-align usw.) festlegen. Alle media-queries erben diese eigenschaften.
Dann nimmst du die naechst groessere klasse und definierst oder ueberschreibst nur, was sich gegenueber dem kleinsten layout aendert.

Ich lege mir bei der entwiclung immer fuer jede media-query ein eigenes CSS file an. Es ist deutlich einfacher 2 css-klassen in 2 verschiedenen dateien miteinander zu vergleichen, als laufend in einer riesigen datei hoch- und runterzuscrollen.

(Die einzelnen css files sollte man allerdings aus performancegruenden zu einer einzigen richtigen css datei zusammenfassen bevor man die seite online stellt)

Ansonsten schau dir mal SASS und LESS an, damit wird es deutlich einfacher guten CSS code zu schreiben.

Mµ · Mµ » 11.02.2016, 11:44 **Media Queries zusammenfassen?**

Hallo nerd, also genau anders herum. Ja, das würde Sinn ergeben. Schade, dass man die queries nicht (durch Komma oder "or") verbinden kann. Danke.

mrdondot · **mrdondot** » 11.02.2016, 15:14 **Media Queries zusammenfassen?**

Soweit ich weiß kann man Media Querys schon verbinden.

Code: Alles auswählen

@media only screen and &#40;max-width&#58;500px&#41; and &#40;max-height&#58;500px&#41;

Wenn die maximale Breite unter 500px UND die maximale Höhe unter 500px ist, dann greift das Query.

Oder hab ich dich da jetzt missverstanden?

nerd · **nerd** » 11.02.2016, 23:31 **Media Queries zusammenfassen?**

Mµ hat geschrieben:Hallo nerd, also genau anders herum. Ja, das würde Sinn ergeben. Schade, dass man die queries nicht (durch Komma oder "or") verbinden kann. Danke.

Oh, das geht schon wie von mrdondot beschrieben. Hatte die frage wohl falsch verstanden.

Allerdings benutze ich persoehnlich nie max-height in media queries. Selbst wenn man nur max-width und min-width benutzt um eine handvoll layouts zu definiernen muss man schon tierisch aufpassen dass man keine pixelgroesse undefiniert laesst oder doppelt belegt, was dazu fueht das element zuviel oder zu wenig styles zugeteilt bekommen. Wenn man noch eine zusaetzliche dimnension height anlegt, multipliziert man die potentiellen probleme.