Dieser Artikel veranschaulicht die Methode zum Anwenden von Haltepunkten und Medienabfragen auf die „Überlauf“-Dienstprogramme in Tailwind CSS.
Wie nutzt man Haltepunkte und Medienabfragen mit „Überlauf“ in Tailwind?
Erstellen Sie eine HTML-Struktur, um bestimmte Haltepunkte und Medienabfragen auf „Überlauf“-Dienstprogramme in Tailwind anzuwenden. Verwenden Sie dann die „ md ' oder ' lg ” Haltepunkte mit dem gewünschten „overflow-
Beispiel
In diesem Beispiel verwenden wir die „md“ Haltepunkt mit dem „Überlauf-Scroll“ Dienstprogramm in der
Container, um die Bildlaufleisten hinzuzufügen und sie immer auf mittlerer Bildschirmgröße anzuzeigen: < Körper >
< div Klasse = „overflow-auto md:overflow-scroll bg-purple-300 p-4 mx-16 mt-5 h-36 text-justify“ >
Tailwind CSS bietet verschiedene „Überlauf“-Dienstprogramme, wie z
„overflow-auto“, „overflow-scroll“, „overflow-hidden“, „overflow-visible“
usw. Diese Dienstprogramme bestimmen, wie ein bestimmtes Element mit dem Inhalt umgeht
das die Behältergröße überschreitet. Jedes Dienstprogramm bietet einzigartige Funktionen,
Ihr Endziel bleibt jedoch dasselbe, nämlich den Überlauf zu kontrollieren
Verhalten des ausgewählten Elements.
< / div >
< / Körper >
Hier:
- Der „Überlauf-Auto“ Die Klasse wird verwendet, um die Bildlaufleisten zum hinzuzufügen Container und zeigen Sie sie nur an, wenn ein Scrollen erforderlich ist.
- Der „md:overflow-scroll“ Die Klasse fügt die Bildlaufleisten hinzu und zeigt sie immer an „md“ Haltepunkt (mittlere Bildschirmgröße).
Ausgabe:
Gemäß der obigen Ausgabe wurden Haltepunkte und Medienabfragen erfolgreich auf die „Überlauf“-Dienstprogramme angewendet.
Abschluss
Um Haltepunkte und Medienabfragen auf „Überlauf“-Dienstprogramme in Tailwind anzuwenden, verwenden Sie „ sm “, „ md ' oder ' lg „Haltepunkte mit den gewünschten“ Überlauf-