Wohin gehen die Medienanfragen in einem Stylesheet: ganz unten oder durchgehend gemischt?

Question

Ich arbeite an meiner ersten Responsive Site und habe zahlreiche Artikel gelesen, kann aber keine explizite Antwort auf meine Frage finden.

Ich habe an dieser Stelle 3 Designs erstellt und codiert. Die gesamte Site hat eine flüssige Hauptspalte und eine feste Seitenleiste. Die Kopf- und Fußzeile sind flüssig. Nach einem Cutoff-Punkt wird es von 2 Spalten zu 1 gehen, mit einigen zusätzlichen Änderungen, um zur Smartphone-Größe zu gelangen. Ich möchte ein Stylesheet. Nachdem ich einige Vor-und Nachteile gelesen habe, da dies meine erste Responsive-Site ist, werde ich das Desktop-Design zum "Standard" machen und Medienabfragen verwenden, um Stile für kleinere Größen zu ändern.

Ich habe mehrere Stile, die sich nicht von Größe zu Größe ändern, und eine Handvoll von Stilen, die sich ändern.

Gehe ich weiter und mache mein gesamtes Stylesheet für den Desktop, füge dann die Medienabfragen ganz unten hinzu? (Vor den Druckstilen oder danach?) Oder mische ich die Medienabfragen überall im Stylesheet, wo auch immer der "Standard" -Stil ist?

Danke!

Answer 1

Ich habe auch eine Weile über meinen Kopf gekämpft. Einige meiner Websites haben einen großen Handheld- oder Nur-Druck-Bereich am unteren Rand, einige haben die relevanten Medienabfragen direkt nach den Selektoren, auf die sie sich auswirken. Soweit ich gesehen habe, hat keine der beiden Möglichkeiten einen Einfluss auf die Rendering-Leistung auf die eine oder andere Weise (wenn es eine gibt, habe ich sie nicht wahrgenommen).

Meine Antwort ist nur Verwenden Sie, was Sie fühlen, ist leichter zu lesen. Wenn dies Teil eines größeren Projekts ist, konsultieren Sie alle Teammitglieder, die auch am CSS arbeiten und fragen Sie, welche sie bevorzugen.