Responsives Design

Tailwind CSS erleichtert es, responsive Designs zu erstellen, indem es Utility-Klassen für Breakpoints und Media Queries bereitstellt.

Breakpoints

Breakpoints in Tailwind CSS sind bei bestimmten Bildschirmgrößen definiert, sodass Sie verschiedene Stile bei unterschiedlichen Ansichtsbreiten anwenden können.

Standard-Breakpoints

Diese Breakpoints können als Präfixe verwendet werden, um Stile bedingt basierend auf der Ansichtsbreite anzuwenden.

Erklärung

1. bg-blue-500: Setzt die Hintergrundfarbe standardmäßig auf einen Blauton;
2. p-4: Fügt auf allen Seiten einen Abstand von 1rem (16px) hinzu;
3. sm:bg-green-500: Setzt die Hintergrundfarbe auf einen Grünton auf kleinen Bildschirmen und größer (min-width: 640px);
4. md:bg-red-500: Setzt die Hintergrundfarbe auf einen Rotton auf mittleren Bildschirmen und größer (min-width: 768px);
5. lg:bg-yellow-500: Setzt die Hintergrundfarbe auf einen Gelbton auf großen Bildschirmen und größer (min-width: 1024px);
6. xl:bg-purple-500: Setzt die Hintergrundfarbe auf einen Lilaton auf extra großen Bildschirmen und größer (min-width: 1280px).

Anwenden von responsiven Stilen

Sie können responsive Stile auf jede Utility-Klasse in Tailwind CSS anwenden, indem Sie sie mit einem Breakpoint versehen.

Erklärung

Abstand:

1. p-4: Fügt standardmäßig einen Abstand von 1rem (16px) auf allen Seiten hinzu;
2. sm:p-6: Fügt einen Abstand von 1.5rem (24px) auf allen Seiten für kleine Bildschirme und größer (min-width: 640px) hinzu;
3. md:p-8: Fügt einen Abstand von 2rem (32px) auf allen Seiten für mittlere Bildschirme und größer (min-width: 768px) hinzu;
4. lg:p-10: Fügt einen Abstand von 2.5rem (40px) auf allen Seiten für große Bildschirme und größer (min-width: 1024px) hinzu;
5. xl:p-12: Fügt einen Abstand von 3rem (48px) auf allen Seiten für extra-große Bildschirme und größer (min-width: 1280px) hinzu.

Textgröße:

1. sm:text-sm: Setzt die Schriftgröße auf klein (0.875rem oder 14px) für kleine Bildschirme und größer (min-width: 640px);
2. md:text-base: Setzt die Schriftgröße auf Basis (1rem oder 16px) für mittlere Bildschirme und größer (min-width: 768px);
3. lg:text-lg: Setzt die Schriftgröße auf groß (1.125rem oder 18px) für große Bildschirme und größer (min-width: 1024px);
4. xl:text-xl: Setzt die Schriftgröße auf extra-groß (1.25rem oder 20px) für extra-große Bildschirme und größer (min-width: 1280px).

Schriftgewicht:

1. sm:font-light: Wendet leichtes Schriftgewicht für kleine Bildschirme und größer (min-width: 640px) an;
2. md:font-normal: Wendet normales Schriftgewicht für mittlere Bildschirme und größer (min-width: 768px) an;
3. lg:font-semibold: Wendet halbfettes Schriftgewicht für große Bildschirme und größer (min-width: 1024px) an;
4. xl:font-bold: Wendet fettes Schriftgewicht für extra-große Bildschirme und größer (min-width: 1280px) an.

Hinweis

Suchen Sie nach spezifischen Informationen zur Reaktionsfähigkeit? Verweisen Sie auf den folgenden Link.