In diesem Blog wird der Prozess der Anwendung von Medienabfragen und Haltepunkten mithilfe des Overscroll-Dienstprogramms in Tailwind demonstriert.
Wie wende ich Medienabfragen und Haltepunkte mit Overscroll in Tailwind an?
So wenden Sie die Haltepunkte oder Medienabfragen mit anderen Namen an, wenn es um CSS mit dem „ überscrollen ' Dienstprogramm. Das HTML-Programm wird erstellt und wendet die verschiedenen Haltepunkte an. sm ',' md ' oder ' lg ” mit den passenden Utility-Klassen aus dem „overscroll“-Utility. Es ändert das Scrollverhalten von Elementen auf verschiedenen Bildschirmgrößen.
Schritt 1: Verwenden Sie die Haltepunkte und Medienabfragen im HTML-Code
Erstellen Sie ein HTML-Dokument und wenden Sie die Haltepunkte an, die den Bildschirmgrößen und Medienabfragen für jeden Haltepunkt entsprechen. Zum Beispiel ' md ' Und ' lg „Im folgenden Code werden Haltepunkte für die Textgröße verwendet und das Overscroll-Verhalten wird darauf angewendet:
< Körper Klasse = „bg-slate-500“ >
< div Klasse = „text-red-900 p-4 lg:p-8“ >
< P Klasse = 'relativ md:absolut md:overscroll-contain md:text-lg md:translate-x-4 md:translate-y-4 lg:overscroll-none lg:text-xl lg:statisch lg:translate-x-4 lg :translate-y-4 ' > Dieser Text hat je nach Bildschirmgröße unterschiedliche Schriftgrößen. Es wird auf kleinen Bildschirmen kleiner sein , Mittel - Größe auf mittelgroßen Bildschirmen , und größer auf großen Bildschirmen. P >
div >
Körper >
In diesem Code:
- „ bg-slate-500 ” setzt die Hintergrundfarbe auf Grau.
- „ text-rot-900 „Ändert die Textfarbe in Rot.
- „ S. 4 ” fügt einen Abstand von 4 Pixeln hinzu.
- „ lg: S. 8 Fügt auf großen Bildschirmen einen Abstand von 8 Pixeln hinzu.
- Die Ausgangsposition des „ Das Tag „“ wird relativ zur übergeordneten Seite festgelegt, indem das „Tag“ verwendet wird. relativ ' Klasse.
- „ md: absolut ”Ändern Sie die Position des Textes von relativ zu absolut auf einem mittelgroßen Bildschirm.
- „ md:overscroll-contain „ stellt sicher, dass das „Overscroll“-Verhalten innerhalb dieses Elements enthalten ist, anstatt sich auf die gesamte Seite auszuwirken, wenn der Bildschirm mittelgroß ist.
- „ md:text-lg „macht den Text auf einem mittelgroßen Bildschirm groß.
- „ md:translate-x-4 ' Und ' md:translate-y-4 „Text verschieben“ 4px ” nach unten und rechts auf mittlerer Bildschirmgröße.
- „ lg:overscroll-none ” setzt die „ überscrollen ”-Klasseneigenschaft auf „Keine“ auf einem großen Bildschirm.
- „ lg:text-xl „Ändert die Textgröße für einen großen Bildschirm auf „Extragroß“.
- „ lg:statisch „Ändert die Position des Textes in Bezug auf die übergeordnete Seite von absolut auf statisch für einen großen Bildschirm
- „ lg:translate-x-4 ' Und ' lg:translate-y-4 „Bewegen Sie den Text auf einem großen Bildschirm um 4 Pixel nach unten und rechts.
Schritt 2: Vorschau der Ausgabe
Sehen Sie sich nun eine Vorschau der Webseite an, die durch Ausführen des obigen HTML-Codes erstellt wurde, und ändern Sie die Bildschirmgröße der HTML-Site, um sichtbare Änderungen zu sehen:
Im obigen Bildschirm wird „ überscrollen Das Verhalten ist sichtbar und durch Verkleinern der Bildschirmgröße kann man sehen, dass sich die Textgröße durch die darauf angewendeten Medienabfragen ändert.
Abschluss
So wenden Sie die Medienabfragen und Haltepunkte mit dem „ überscrollen Geben Sie im Dienstprogramm „Overscroll“ die Haltepunkte mit einer gewünschten Klasse an. Durch Variation der Bildschirmgröße passen die Medienabfragen die Ausgabe des Bildschirms an. In diesem Blog wurde der Prozess der Anwendung der Medienabfragen und Haltepunkte mit „Overscroll“-Verhalten in Tailwind demonstriert.