Ist es besser, mehrere Medienabfragen oder eine einzige Medienabfrage zu haben

Question

Ich arbeite mit Bootstrap und ich möchte (falls zutreffend) spezifische CSS für jede Bildschirmgröße haben. Ich frage mich, ob es besser ist, eine Medienabfrage für jede Bildschirmgröße in einem eigenen Abschnitt meines CSS-Sheets zu haben, oder ob ich an jeder Stelle eine Medienabfrage machen sollte, wo sie benötigt wird.

Also lassen Sie uns sagen, ich habe das für meine Standard-Bildschirmgröße:

.example-class{ 
    padding: 10px; 
} 

Und dann für mobile Bildschirme, ich dies wollen:

@media(max-width: 480px){ 
    .example-class{ 
     padding: 5px; 
    } 
} 

sollte ich 1 Medienabfrage für mobile Bildschirme in Es ist ein eigener Abschnitt in meinem CSS, in dem der gesamte mobile Bildschirm formatiert wird, oder sollte ich jedes Mal eine Medienabfrage durchführen, wenn ich ein individuelles Styling für mobile Bildschirme benötige.

Von dem, was ich sagen kann, sollte mehrere Medienabfragen nicht unbedingt die Leistung beeinträchtigen. Wenn Sie viele hinzufügen, wird die Größe der CSS-Datei jedoch erhöht, was sich auf die Leistung auswirken kann.

Zusätzlich möchte ich sicherstellen, dass mein CSS für andere leicht verständlich ist. Ich denke, es könnte einfacher sein, in jedem Fall eine Medienabfrage zu haben, so dass das CSS für ein bestimmtes Element an einer Stelle steht.

Answer 1

Für das, was ich verstehe beide Webkit und Gecko Motoren Medienanfragen Serialisierung (ich glaube, es ist eigentlich eine W3C-Empfehlung), so dass sie nur die Medienabfrage bewerten nur einmal.

Ich würde sagen, wenn die Leistung ein Problem für Sie ist, laden Sie bestimmte Dateien für jeden Fall, die Unordnung von ihnen zu löschen. Auf diese Weise erhalten Sie mehrere kleinere Dateien und laden nur die benötigten Dateien, wenn Sie sie benötigen.

Wenn die Leistung kein Problem ist, glaube ich nicht, dass die Größe der CSS-Datei so stark ansteigt, dass sie sich auf die Leistung Ihrer Website auswirkt. Denken Sie daran, dass es nicht normal ist, die Größe einer Webseite zu ändern, wenn Sie nicht gerade Dinge testen.

Als Front-End-Entwickler ist es viel einfacher, CSS zu pflegen, wenn Ihre Elemente CSS alle zusammen sind, anstatt mehrere Teile einer Datei oder mehrere Dateien durchlaufen zu müssen, um sie zu aktualisieren.

So empfehle ich mit:

.example-class{ 
    padding: 10px; 
} 

@media(max-width: 480px){ 
    .example-class{ 
     padding: 5px; 
    } 
} 

Hoffnung, das hilft.

Answer 2

Wenn Sie ein gängiges Medienabfrageintervall für eine Reihe von Bildschirmgrößen schreiben, anstatt Medienabfragen wo immer erforderlich zu schreiben, wird der Code übersichtlicher und skalierbarer.

@media screen and (min-width: 320px) and (max-width: 767px) { 
    /*Mobile Device Screens*/ 
} 

@media screen and (min-width: 991px) { 
    /*Large Screens*/ 
} 

Um den Code lesbarer machen wir in jedem Intervall in Abschnitte und Unterabschnitte auf der Grundlage der verschiedenen Seiten und ihre jeweiligen Inhalte des Codes teilen kann.

@media screen and (min-width: 320px) and (max-width: 767px) { 
    /*Mobile Device Screens*/ 
    /*Homepage*/ 
    . 
    . 
    . 
    /*About*/ 
    . 
    . 
    . 
} 

@media screen and (min-width: 991px) { 
    /*Large Screens*/ 
    /*Homepage*/ 
    . 
    . 
    . 
    /*About*/ 
    . 
    . 
    . 
}