CSS Breakpoints?

Bei wie viel px setzt ihr eure breakpoints? Bei mir sollen es 3 breakpoints sein.

Answer 1

[MrAmazing2]

So, dass es gut aussieht. Je nach Website anders.

Du könntest dich an den Werten von Bootstrap orientieren: https://getbootstrap.com/docs/5.0/layout/breakpoints/

Dieser Artikel hat ein interessantes Bild, das die verschiedenen größen visuell darstellt: https://www.mediaevent.de/css/breakpoints.html

Woher ich das weiß: Hobby – Programmieren ist mein Hobby & Beruf

Answer 2

[BeamerBen]

Schreibe nicht so viel CSS und wenn dann teilweise eh nur für Desktop. Aber ich versuch das teils einfach möglichst dynamisch zu haben ohne feste Grenzen wann das Layout umspringt.

Woher ich das weiß: Berufserfahrung – Software Entwickler / Devops

Answer 3

[medmonk]

Bei wie viel px setzt ihr eure breakpoints?

Ob, wann und wie ich Media Queries einsetze, hängt eigentlich immer vom Layout, den Elementen und dessen Content ab. Ich verwende bekannte Werte, jedoch nur, um eine erste grobe Unterteilung in bestimmte Viewport-Varianten vorzunehmen. Alles Weitere ist im Grunde ein ausgewogener und Projekt-bezogener Mix aus den Konzepten Mobile-first und Content-first. Eben weil es häufig nicht ausreicht, wenn man sich bloß und ausschließlich an den verfügbaren Viewports orientiert.

In den vergangenen Jahren sind bereits unzählige Artikel zu diesem Thema erschienen. Sei es in Bezug zu den unterschiedlichen Konzepten, dem Einsatz von Container- und/oder Element-Queries bis hin zur Wahl der "richtigen" Unit für MQs. Da ich selber inzwischen fast ausschließlich einen Preprocessor für CSS verwende, genauer gesagt Sass, nutze ich ohnehin nach Bedarf eigene Mixins für Media Queries. Hinzu kommen dann noch CSS3 Features wie calc und clamp.

Wenn man das alles zusammen nimmt, sollte man Media Queries ebenso wie andere Techniken und Lösungsansätze dann einsetzen, wenn sie tatsächlich benötigt werden. Sei es, weil das eigene Layout aus unterschiedlichen Gründen reduziert werden muss oder bloß, weil einzelne Elemente und Inhalte an bestimmten Stellen das visuelle Erscheinungsbild stören würden, wenn man sie nicht einzeln anpassen würde. Zu letztem zählen u.a. Schriftgröße und Umbrüche bei Text.

Ich meine, was nützt dir ein "starres" Set an vordefinierten Media Queries, wenn sie an bestimmten Stellen gar nichts nützen. Das merkt man vor allem dann, wenn man z.B. vorab bloß mit Platzhalter-Text gearbeitet hat. Von daher würde ich eigentlich immer möglichst die tatsächlichen Inhalte einpflegen. Vordefinierte Media Queries von Bootstrap und Co sind für eine grobe Unterteilung gut, für alles Weitere legt man aber besser Element- bzw. Content-bezogene Media Queries an.

LG medmonk

Answer 4

[FaTech]

Ich habe für sowas keine festen Angaben, denn jede Seite sieht unterschiedlich aus, deshalb müssen die Angaben überall anders sein

Comments

[clever00]

Also kann ich das selber entscheiden?

[MrAmazing2]

@clever00

Klar, warum solltest du das nicht können?

[clever00]

@MrAmazing2

Weil ich ganz oft Angaben wie 768px, 992px und 1200px gesehen habe.

[MrAmazing2]

@clever00

Sind halt die Bootstrap Standardwerte. Die benutzen wir in der Arbeit auch, sind ganz gut.

Answer 5

[EinAlexander]

Bei wie viel px setzt ihr eure breakpoints?

• 480px
• 736px
• 980px
• 1280px
• 1680px

Alex