Beim Entwerfen einer responsiven Website ist der Rückenwind „ Haltepunkte ' Und ' Medien-Anfragen „spielen eine Schlüsselrolle bei der Anwendung mehrerer Funktionalitäten, die bequem an unterschiedliche Bildschirmgrößen angepasst werden können. Diese Merkmale müssen über verschiedene Klassen spezifiziert werden, z. B. „ md (mittelgroße Bildschirme)“, „lg(großer Bildschirm)“ oder über die Funktion „@media ”-Regel, die die Funktionalitäten basierend auf der angegebenen Bedingung anhängt.
Dieser Artikel behandelt den folgenden Inhalt:
- Wie wende ich die Dicke der Textdekoration mit Tailwind-Haltepunkten und Medienabfragen an?
- Anwenden der Textdekorationsdicke mit Tailwind-Haltepunkten.
- Anwenden der Textdekorationsdicke mit Tailwind-Medienabfragen.
Wie wende ich die Dicke der Textdekoration mit Tailwind-Haltepunkten und Medienabfragen an?
Der ' Dicke der Textdekoration ” kann mit Hilfe des „ angewendet werden Textdekorationsdicke ”-Eigenschaft, gefolgt vom Zieldickenwert in Pixeln. Diese Pixel können „ 1px“, „2px“, „4px“ oder „8px“. “. Der ' Haltepunkte „werden verwendet, um verschiedene angewandte Funktionalitäten entsprechend der Bildschirmgröße des Benutzers anzupassen, indem die „ md (mittelgroße Bildschirme)“, „lg (großer Bildschirm) ”-Klassen usw. Die „ Medien-Anfragen „Ermöglichen Sie bedingte Implementierungsstile basierend auf einer Reihe von Browser- und Betriebssystemparametern über das „@“ Medien ' Regel.
Beispiel 1: Anwenden der Textdekorationsdicke mit Tailwind-Haltepunkten
In diesem Beispiel wird die Dicke der Textdekoration an verschiedenen Punkten festgelegt, um den Stil anzuwenden, der je nach Bildschirmgröße variiert:
< html >
< Kopf >
< Meta Zeichensatz = „utf-8“ >
< Meta Name = „Ansichtsfenster“ Inhalt = „width=device-width, initial-scale=1“ >
< Titel >< / Titel >
< Skript src = „https://cdn.tailwindcss.com“ >< / Skript >
< / Kopf >
< Körper >
< Textbereich Klasse = „underline md:decoration-8 lg:box-decoration-slice text-black text-2xl“ Ausweis = „Temp“ > Das ist Linuxhint < / Textbereich >
< / Körper >
< / html >
Führen Sie gemäß diesem Codeausschnitt die folgenden Schritte aus:
- Fügen Sie zunächst den CDN-Pfad ein, um die Tailwind-Funktionen anzuwenden.
- Machen Sie dann ein „< Textbereich >“-Element und integrieren Sie die angegebenen Stärken der Textdekoration auf Standard- und mittleren Bildschirmen über das „ md ”-Klasse bzw.
- Der ' text-schwarz ' Und ' text-2xl ”-Klassen weisen dem Text jeweils die Farbe (Schwarz) und die Schriftgröße, also 2xl, zu.
Ausgabe
Aus diesem Ergebnis kann geschlossen werden, dass die Dicke der Textdekoration angemessen an die variierende Bildschirmgröße angepasst wird.
Beispiel 2: Anwenden der Textdekorationsdicke mit Tailwind-Medienabfragen
Der '@ Medien Die Regel „“ wird in Medienabfragen verwendet, um verschiedene Stile für verschiedene Medientypen/Geräte zu implementieren. In dieser speziellen Demonstration werden diese Medienabfragen verwendet, um die Textdicke basierend auf einem angegebenen Parameter/einer angegebenen Bedingung zu dekorieren:
< html >
< Kopf >
< Meta Zeichensatz = „utf-8“ >
< Meta Name = „Ansichtsfenster“ Inhalt = „width=device-width, initial-scale=1“ >
< Titel >< / Titel >
< Skript src = „https://cdn.tailwindcss.com“ >< / Skript >
< / Kopf >
< Körper >
< h1 Ausweis = „Temp“ >Das ist Linuxhint< / h1 >
< / Körper >
< / html >
< Stil Typ = „Text/CSS“ >
#temp {
Textdekoration: unterstreichen;
Text- ausrichten : Center;
}
@ Medien ( max- Breite :550px ) {
#temp {
Textdekorationsdicke: 4px;
} }
< / Stil >
Berücksichtigen Sie in diesem Codeblock die unten aufgeführten Methoden:
- Geben Sie ebenfalls den CDN-Pfad an.
- Fügen Sie dann ein „< h1 >“-Element mit der angegebenen „id“.
- Im CSS-Teil des Codes wird innerhalb der Zeile „< Stil >“-Tag formatieren Sie die enthaltene Überschrift.
- Erstellen Sie außerdem das „@“ Medien ”-Regel, die eine Bedingung anwendet, so dass, solange die Bildschirmbreite „ 550px “, wird die Textdekorationsdicke auf „ 4 ” Pixel.
- Wenn die Bildschirmbreite diese Grenze überschreitet, wird der Text einfach unterstrichen.
Ausgabe
Dieses Ergebnis bedeutet, dass die „@media“-Regel, d. h. Medienabfragen, entsprechend der Bildschirmbreite angewendet wird.
Abschluss
Die Haltepunkte und Medienabfragen können mit Textdekorationsdicke angewendet werden, um die angewendeten Funktionalitäten entsprechend der Bildschirmgröße des Benutzers mithilfe verschiedener Klassen anzuzeigen, z. B. „ md“, „lg “ oder über das „@“ Medien ”-Regel bzw. Der letztgenannte Ansatz ist im „ CSS „Code, der das Zielelement aufruft und es basierend auf dem festgelegten Parameter/der festgelegten Bedingung dekoriert. In diesem Leitfaden wird das Anwenden der Dicke der Textdekoration mit Tailwind Breakpoint und Media Queries erläutert.