Breitenbasierte Media Queries basieren auf dem gesamten Browserfenster. Wenn das Browserfenster schmaler als 800 Pixel ist, tue dies. Wenn das Browserfenster breiter als 400 Pixel ist, tue dies. Aber das reicht nicht immer. Stellen Sie sich ein Desktop-3-Spalten-Layout bei 1000 Pixeln vor. Jede Spalte ist 333 Pixel breit. Dann haben Sie einen Media-Query-Bruchpunkt bei 800 Pixeln, der es zu einem 2-Spalten-Layout macht, und die dritte darunter. Obwohl der Browser jetzt schmaler ist, ist jede Spalte breiter (400 Pixel). Es wäre einfacher, Media-Queries für die Module innerhalb dieser Spalten zu schreiben, basierend auf der aktuellen Breite der Spalte und nicht des Browserfensters.
Kumail Hunaids Projekt kann dabei helfen. Mir gefällt der Ansatz. Er fügt Elementen Klassennamen hinzu, die Sie dann zum Stylen verwenden, daher ist es ziemlich unauffällig.