Media Query Breakpoints Pixelspezifikation

Question

Ich bin wirklich verwirrt, was die Media Query Breakpoints sein sollten. Die Art und Weise ich bin daran tun, ist mit einem Pixel kleiner als der nächste Haltepunkt, zum Beispiel

@media screen and (max-width: 749px) {} //Mobile design CSS applies to everything until 74ppx 
@media screen and (min-width: 750px) and (max-width: 969px) {} 

etc. 

Aber einige Leute verwenden, um die genauen Werte wie

@media screen and (max-width: 750px) {} 
@media screen and (min-width: 750px) and (max-width: 970px) {} 

Wäre das nicht der zweite Ansatz kaputt? Mein Verständnis ist der erste Ansatz ist der Weg zu gehen.

Und was ist, wenn Sie etwas tun, wie

@media screen and (max-width: 750px) {} 
@media screen and (max-width: 970px) {} 

Und ich möchte, dass alle mobilen Designs bis 750, gelten, aber bei 750 ist, wo die Tablette Ansicht beginnt. Das Gleiche gilt für 970. In diesem Fall wäre es auch ein Pixel weniger korrekt? I.e max-width: 749 und max-width: 969

Answer 1

Ja, der erste ist richtig. Wenn der Bildschirm im zweiten Fall genau 750 Pixel breit ist, werden beide Medienabfragebereiche angewendet, was zu Problemen führen kann.

Bezüglich Ihrer Zusatz:

@media screen and (max-width: 750px) {} 
@media screen and (max-width: 970px) {} 

In diesem Fall sind die Regeln in der zweiten Abfrage werden diejenigen mit identischen CSS-Selektoren in der ersten überschreiben, was wahrscheinlich auch zu Problemen führen wird. Der übliche Weg wäre entweder umgekehrt (Desktop-Ansatz) oder mit einem Mobile-First-Ansatz, bei dem Sie zuerst die allgemeinen Regeln für mobile Größen angeben und dann Medienabfragen für größere Größen hinzufügen, die den allgemeinen überschreiben Regeln. Das wäre zum Beispiel

@media screen and (min-width: 720px) {} 
@media screen and (min-width: 1280px) {}