Ist es besser, mehrere Medienabfragen für verschiedene Elemente oder unterschiedliche Breiten zu haben?

Question

Ich erstelle eine responsive Website und mache gerade einige Medienabfragen. Ich schreibe sie, wie ich gehen, wie dies zum Beispiel:

.status-reply-disabled { 
color: #B1B1B1; 
font-size: 14px; 
margin-top: 10px; 
position: absolute; 
margin-left: 65px; 
} 

@media screen and (max-width: 600px) { 
    .status-reply-disabled { 
     font-size: 10px; 
     margin-left: 35px; 
    } 
} 

dann ein wenig später habe ich so etwas wie dieses haben werden:

.status-reply-avatar { 
border: 1px solid #d8d8d8; 
width: 45px; 
border-radius: 50%; 
position: absolute; 
} 

@media screen and (max-width: 600px) { 
    .status-reply-avatar { 
     display:none; 
    } 
} 

Wäre es besser, für Bearbeitungszeiten, haben alle Medienabfragen von, sagen wir, 600px in einer großen Frage? So:

@media screen and (max-width: 600px) { 
    .status-reply-avatar { 
     display:none; 
    } 
    .status-reply-disabled { 
     font-size: 10px; 
     margin-left: 35px; 
    } 

    ... 

    All other styles for this width 

    ... 

} 

oder geht es mir gut?

Answer 1

Wenn Sie nicht über eine große Menge an Code verfügen, spielt die Leistung keine Rolle. In letzter Zeit bevorzuge ich es, mehrere Medienabfragen zu schreiben, immer in der Nähe der allgemeinen Regel eines bestimmten Elements, einfach um die Kontrolle über die Dinge zu behalten (wie in den ersten beiden Codeblöcken). Ich mag das mehr. In Bezug auf die Geschwindigkeit wird es keinen großen Unterschied machen.

Answer 2

Sicher, legen Sie Ihren Code in einer Medienabfrage, es wird das gleiche tun, und Sie werden weniger Zeilen Code schreiben, und Sie werden folgen dem DRY Prinzip (Do not Repeat Yourself).

Wenn Sie die gleiche Medienabfrage zweimal in einer Datei definieren, es ist nicht eine sehr gute Praxis ...

Answer 3

versuchen, den Code alle zusammen unter einer bestimmten Abfrage zu setzen, sagt max-width = 600px. Dies ist besser für einen sauberen und semantischen Code. Gehen Sie vom Desktop auf den schmaleren Bildschirm, der für das Handy etwa 400px ist. Es ist immer besser. Sie werden verwirren, wenn Sie nach einer Woche oder so wiederkommen. Beginnen Sie weit und dann schmal wie Sie gehen. Schreiben Sie nicht für ein Element in max-width = 600px, wenn Sie den 900px-Stop immer noch nicht ausgeführt haben.

Answer 4

Es gibt keinen Unterschied. In Bezug auf die Organisation könnten Sie Code wie zuvor programmieren und Code in Abschnitten organisieren oder eine andere CSS-Datei nur für Medienabfragen erstellen.