In diesem Artikel wird erläutert, wie Sie den Haltepunkt und die Medienabfrage in Verbindung mit der Positionseigenschaft in Tailwind verwenden.
Wie nutzt man Haltepunkte und Medienabfragen mit der Positionseigenschaft?
Haltepunkte sind die Kernblöcke für die Erstellung eines ultimativen responsiven Designs. Es dient dazu, das Layout an unterschiedliche Bildschirmgrößen anpassbar zu machen. Medienabfragen werden verwendet, um abhängig von der Bildschirmauflösung bestimmte Stile auf Elemente anzuwenden. Das Positionsattribut kann in Verbindung mit diesen angewendet werden, um die Ausgabe optimierter zu gestalten.
Schritt 1: Anwenden der Positionseigenschaft mit Haltepunkten und Medienabfragen
In diesem Schritt wird das Programm eingefügt, um die Positionseigenschaft entlang der Haltepunkte oder Medienabfragen über die ausgewählten „ P ' Element:
< Körper Klasse = „bg-slate-500“ >
< div Klasse = „text-gelb-300 p-4 lg:p-8“ >
< P Klasse = 'relativ md:absolut md:text-lg md:translate-x-4 md:translate-y-4 lg:text-xl lg:statisch lg:translate-x-4 lg:translate-y-4 ' > Dieser Text hat je nach Bildschirmgröße unterschiedliche Schriftgrößen. Auf kleinen Bildschirmen ist es kleiner, auf mittelgroßen Bildschirmen mittelgroß und auf großen Bildschirmen größer. < / P >
< / div >
< / Körper >
In diesem Code:
- „ bg-slate-500 ” setzt die Hintergrundfarbe auf Grau.
- „ text-gelb-300 „Ändert die Textfarbe in Gelb.
- „ S. 4 ” fügt einen Abstand von 4 Pixeln hinzu.
- „ LG: p-8' Fügt auf großen Bildschirmen einen Abstand von 8 Pixeln hinzu.
- Die Anfangsposition wird relativ zur übergeordneten Seite festgelegt, indem „ relativ ' Klasse.
- „ md:text-lg „macht den Text auf einem mittelgroßen Bildschirm groß.
- „md:absolut“ Ändert die Position des Textes von relativ zu absolut auf einem mittelgroßen Bildschirm.
- „ md:translate-x-4“ Und „md:translate-y-4“ Verschieben Sie den Text auf mittlerer Bildschirmgröße um 4 Pixel nach unten und rechts.
- „ lg:text-xl „Ändert die Textgröße auf einem großen Bildschirm in „Extragroß“.
- „ lg:statisch „Ändert die Position des Textes in Bezug auf die übergeordnete Seite auf einem großen Bildschirm von absolut zu statisch
- „ 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: Überprüfen Sie die Ausgabe
Zeigen Sie eine Vorschau der mit dem obigen Code erstellten Webseite an und passen Sie die Bildschirmgröße an, um die Änderung wie folgt zu sehen:
Es ist ersichtlich, dass Text auf mittleren und großen Bildschirmgrößen ein reaktionsfähiges Verhalten zeigt.
Abschluss
Um Haltepunkte und Medienabfragen in Tailwind zu verwenden, wenden Sie den Haltepunkt an und legen Sie die Medienabfrage auf jeden Haltepunkt fest. Ändern Sie außerdem die Positionseigenschaft an verschiedenen Haltepunkten des Bildschirms. Die Standardaufschlüsselungen sind „ sm ',' md ',' lg ', Und ' xl “. In diesem Blog wurde gezeigt, wie der Haltepunkt und die Medienabfrage mit der Positionseigenschaft in Tailwind verwendet werden.