2017-11-10 3 views
1

Ich erfuhr über Media-Abfragen und gelernt, dass es wichtige Haltepunkte für Layout dramatische Änderungen und kleinere Haltepunkte für Dinge wie Paddings und Schriftgröße sein sollte.
Aber ist es in Ordnung, mehrere Medienabfragen für jeden Abschnitt der Seite zu deklarieren?
zum Beispiel: drei für den Navigation und drei für jeden Abschnitt Hauptinhalt
Ich denke, das das gesamte Layout auf 4 oder 5 Medien als Wechsel-Abfragen besser wäre.Ist es in Ordnung, mehrere Medienabfragen für jeden Abschnitt der Seite zu haben?

+2

Es ist besser, dass Sie eine kleine Anzahl von Abfragen beibehalten, um die Codepflege zu erleichtern. Stellen Sie sich vor, Sie sind ein neuer Entwickler in dem Projekt und Sie müssen all diese verschiedenen Medienabfragen pflegen und verstehen. Nicht einfach. –

+1

Ich bin mir nicht sicher, ob ich dem zustimme, man könnte das Gleiche von allem sagen - benutze nicht so viele Stile, benutze nicht so viel JavaScript, benutze nicht so viel HTML, alles fügt der gesamten Projektkomplexität hinzu . In Wahrheit haben wir Tools, um all diese Dinge abzuschwächen (SCSS, JavaScript-Komponenten + Bundler, HTML-Templating, etc.). Wenn eine Medienabfrage benötigt wird, verwenden Sie sie und suchen Sie nach anderen Möglichkeiten, um Ihren Code leichter verständlich zu machen. – delinear

+0

Sicher, wenn es gebraucht wird, benutze es. Aber ich denke, dass Sie immer überlegen sollten, wie Sie diese minimieren können, indem Sie Mobile-First kodieren, Flexbox verwenden und zum Beispiel die Prozentsätze für Stile einstellen. –

Antwort

1

Meiner Meinung nach ist es für jeden Standort unterschiedlich. Wenn es auf Ihrer Website funktioniert und es ist nicht zu komplex als warum nicht? Es gibt keine Regeln, die für jede Site gelten. Manche Leute benutzen es nicht gern, also nicht. Und manche mögen es so.

+0

"Es gibt keine Regeln" Ich fange von diesem Punkt an :) –

2

warum nicht, tue ich manchmal .. z.B.

@media (max-width: 600px){ 
    body { 
     background: green; 
    } 
} 
@media (max-width: 500px){ 
    body { 
     background: red; 
    } 
} 
@media (max-width: 400px){ 
    body { 
     background: blue; 
    } 
} 

DEMO

Verwandte Themen