Dieser Artikel veranschaulicht die Methode zur Verwendung der responsiven Haltepunkte in Tailwind CSS.
Wie verwende ich reaktionsfähige Haltepunkte in Tailwind?
Um reaktionsfähige Haltepunkte in Tailwind zu verwenden, verwenden Sie die reaktionsfähigen Modifikatoren, wie zum Beispiel „ sm “, „ md “, „ lg “, „ xl ' Und ' 2xl ” mit den anderen Klassen im HTML-Programm. Sehen Sie sich dann die HTML-Webseite an und ändern Sie die Bildschirmgröße, um sicherzustellen, dass die Haltepunkte ordnungsgemäß funktionieren.
Schritt 1: Verwenden Sie Responsive Modifiers im HTML-Programm
Erstellen Sie ein HTML-Programm und verwenden Sie die reaktionsfähigen Modifikatoren mit dem gewünschten Stil. Wir haben zum Beispiel das „ sm “, „ md “, „ lg “, „ xl ' Und ' 2xl reaktionsfähige Modifikatoren:
< Körper >
< div Klasse = „h-screen bg-fuchsia-400 sm:bg-pink-600 md:bg-green-700 lg:bg-purple-500 xl:bg-teal-600 2xl:bg-yellow-500“ >
< h1 Klasse = „text-7xl text-white text-center p-20“ > Linux-Hinweis < / h1 >
< / div >
< / Körper >
Hier:
- „ bg-fuchsia-400 Die Klasse legt die Hintergrundfarbe fest bis Fuchsia.
- „ sm:bg-pink-600 Die Klasse „wendet rosa Farbe auf den Hintergrund für kleine Bildschirme an.
- „ md:bg-green-700 Die Klasse „Ändert die Hintergrundfarbe auf mittelgroßen Bildschirmen in Grün.“
- „ lg:bg-purple-50 Die Klasse „Setzt die Hintergrundfarbe für große Bildschirme auf Lila.
- „ xl:bg-teal-600 Die Klasse „wendet bei besonders großen Bildschirmen eine blaugrüne Farbe auf den Hintergrund an.
- „ 2xl:bg-gelb-500 ”-Klasse ändert die Hintergrundfarbe auf 2XL-Bildschirmen in Gelb.
Schritt 2: Ausgabe überprüfen
Sehen Sie sich die HTML-Webseite an, um zu überprüfen, ob die responsiven Haltepunkte ordnungsgemäß funktionieren oder nicht:
Auf der obigen Webseite kann beobachtet werden, dass sich die Farbe der Webseite mit der Bildschirmgröße ändert, entsprechend der die Haltepunkte angegeben wurden.
Abschluss
Um reaktionsfähige Haltepunkte in Tailwind zu verwenden, verwenden Sie die reaktionsfähigen Modifikatoren, wie zum Beispiel „ sm “, „ md “, „ lg “, „ xl ' Und ' 2xl ” mit den anderen Klassen im HTML-Programm. Diese Modifikatoren werden verwendet, um je nach Bildschirmgröße unterschiedliche Stile auf ein bestimmtes Element anzuwenden. Dieser Artikel hat die Methode zur Verwendung der responsiven Haltepunkte in Tailwind CSS veranschaulicht.