In diesem Artikel wird die Methode zur Verwendung des „Break-After“ mit Haltepunkten und Medienabfragen in Tailwind CSS demonstriert.
Wie nutzt man „Break-After“ mit Haltepunkten und Medienabfragen in Tailwind?
Um einen „Break-After“ mit Haltepunkten und Medienabfragen zu nutzen, definieren Sie mit dem „Break-After“-Dienstprogramm im HTML-Programm unterschiedliche Werte und Stile für unterschiedliche Bildschirmgrößen. Überprüfen Sie dann die Ausgabe, indem Sie die HTML-Webseite anzeigen.
Lassen Sie uns die praktische Umsetzung untersuchen:
Schritt 1: Verwenden Sie Haltepunkte und Medienabfragen mit dem Dienstprogramm „break-after“.
Erstellen Sie ein HTML-Programm und geben Sie mit dem Dienstprogramm „break-after“ unterschiedliche Werte und Stile für unterschiedliche Bildschirmgrößen an. Wir haben zum Beispiel das „ md ” Haltepunkt mit dem „ Pause nach der Spalte „Dienstprogramm und das“ lg ” Haltepunkt mit dem „ Pause nach dem Vermeiden ' Dienstprogramm:
< Körper >
< div Klasse = „columns-2 bg-teal-400“ >
< P Klasse = „md:break-after-column lg:break-after-avoid“ > Hallo... < / P >
< P > Willkommen hier... < / P >
< P > Erfahren Sie mehr über Tailwind CSS... < / P >
< P > Es ist ein CSS-Framework... < / P >
< P > Tschüss... < / P >
< / div >
< / Körper >
Hier:
- Der ' md:break-after-column Die Klasse „gibt an, dass nach diesem bestimmten
-Element an der Stelle „ ein Spaltenumbruch erfolgen soll md ” Haltepunkt (mittlere Bildschirmgröße).
- Der ' lg:break-after-avoid Die Klasse schlägt vor, dass das Element einen Bruch nach dem „ lg ”Haltepunkt (große Bildschirmgröße).
Schritt 2: Ausgabe überprüfen
Überprüfen Sie, ob die Haltepunkte und Medienabfragen angewendet wurden, indem Sie die HTML-Webseite anzeigen:
Auf der obigen Webseite ist der Spaltenumbruch beim angegebenen Element auf dem mittleren Bildschirm aufgetreten und der Umbruch danach wurde auf dem großen Bildschirm vermieden.
Abschluss
Um den „Break-After“ mit Haltepunkten und Medienabfragen in Tailwind zu nutzen, erstellen Sie zunächst eine HTML-Datei. Verwenden Sie dann die Haltepunkte und Medienabfragen mit dem Dienstprogramm „break-after“, indem Sie unterschiedliche Werte und Stile für unterschiedliche Bildschirmgrößen angeben. Führen Sie zur Überprüfung das HTML-Programm aus und sehen Sie sich die Webseite an. In diesem Artikel wurde die Methode zur Verwendung des „Break-After“ mit Haltepunkten und Medienabfragen in Tailwind CSS demonstriert.