Bij het ontwerpen van een responsieve website heeft de Tailwind “ Breekpunten ' En ' Mediavragen ” spelen een sleutelrol bij het toepassen van meerdere functionaliteiten die gemakkelijk kunnen worden aangepast aan verschillende schermformaten. Deze functies moeten worden gespecificeerd via verschillende klassen, d.w.z. “ md (middelgrote schermen)”, “lg (groot scherm)” of via de “@media ”-regel die de functionaliteiten toevoegt op basis van de opgegeven voorwaarde.
Dit artikel behandelt de volgende inhoud:
- Hoe tekstdecoratiedikte toepassen met meewindbreekpunten en mediaquery's?
- De tekstdecoratiedikte toepassen met meewindbreekpunten.
- De tekstdecoratiedikte toepassen met Tailwind-mediaquery's.
Hoe tekstdecoratiedikte toepassen met meewindbreekpunten en mediaquery's?
De ' Tekstdecoratie Dikte ” kan worden toegepast met behulp van de “ tekst-decoratie-dikte ”eigenschap gevolgd door de waarde van de doeldikte in pixels. Deze pixels kunnen “ 1px”, “2px”, “4px” of “8px ”. De ' Breekpunten ” worden toegepast om verschillende toegepaste functionaliteiten aan te passen in overeenstemming met de schermgrootte van de gebruiker met behulp van de “ md (middelgrote schermen)”, “lg (groot scherm) ” klassen, enz. De “ Mediavragen ” schakel voorwaardelijke implementatiestijlen in op basis van een reeks browser- en besturingssysteemparameters via de “@ media ' regel.
Voorbeeld 1: De tekstdecoratiedikte toepassen met meewindbreekpunten
In dit voorbeeld wordt de dikte van de tekstdecoratie op verschillende punten ingesteld om de stijl toe te passen die varieert afhankelijk van de schermformaten:
< html >
< hoofd >
< meta tekenset = 'utf-8' >
< meta naam = 'uitkijk postje' inhoud = 'breedte=apparaatbreedte, initiële schaal=1' >
< titel >< / titel >
< script src = 'https://cdn.tailwindcss.com' >< / script >
< / hoofd >
< lichaam >
< tekstgebied klas = 'onderstrepen md:decoratie-8 lg:doos-decoratie-plakje tekst-zwarte tekst-2xl' ID kaart = 'temperatuur' > Dit is Linuxhint < / tekstgebied >
< / lichaam >
< / html >
Volg volgens dit codefragment de onderstaande stappen:
- Voeg eerst het CDN-pad toe om de Tailwind-functionaliteiten toe te passen.
- Maak vervolgens een “< tekstgebied >”-element en neem de aangegeven tekstdecoratiedikteniveaus op standaard- en mediumschermen op via de “ md 'klasse, respectievelijk.
- De ' tekst-zwart ' En ' tekst-2xl ”-klassen wijzen respectievelijk de kleur (zwart) en de lettergrootte, d.w.z. 2xl, toe aan de tekst.
Uitvoer
Uit deze uitkomst kan worden geconcludeerd dat de dikte van de tekstversiering op passende wijze wordt aangepast aan de variërende schermgrootte.
Voorbeeld 2: De tekstdecoratiedikte toepassen met Tailwind-mediaquery's
De '@ media '-regel wordt gebruikt in mediaquery's om verschillende stijlen voor verschillende mediatypen/apparaten te implementeren. Deze specifieke demonstratie gebruikt deze mediaquery's om de tekstdikte te versieren op basis van een gespecificeerde parameter/voorwaarde:
< html >
< hoofd >
< meta tekenset = 'utf-8' >
< meta naam = 'uitkijk postje' inhoud = 'breedte=apparaatbreedte, initiële schaal=1' >
< titel >< / titel >
< script src = 'https://cdn.tailwindcss.com' >< / script >
< / hoofd >
< lichaam >
< h1 ID kaart = 'temperatuur' >Dit is Linuxhint< / h1 >
< / lichaam >
< / html >
< stijl type = 'tekst/css' >
#temp {
tekstversiering: onderstrepen;
tekst- uitlijnen : centrum;
}
@ media ( max- breedte :550px ) {
#temp {
tekstdecoratie-dikte: 4px;
} }
< / stijl >
Overweeg in dit codeblok de onderstaande methodologieën:
- Neem op dezelfde manier het CDN-pad op.
- Voeg vervolgens een “< h1 >”-element met de aangegeven “id”.
- In het CSS-gedeelte van de code, binnen de “< stijl >”-tag, stijl de opgenomen kop.
- Maak ook de “@ media 'regel die een voorwaarde toepast zodat zolang de breedte van het scherm ' 550px ”, wordt de tekstversieringsdikte ingesteld op “ 4 ”pixels.
- Het is zo dat nadat de schermbreedte deze limiet overschrijdt, de tekst eenvoudigweg wordt onderstreept.
Uitvoer
Deze uitkomst betekent dat de ‘@media’-regel, d.w.z. mediaquery’s, wordt toegepast in overeenstemming met de breedte van het scherm.
Conclusie
De Breakpoints en Media Queries kunnen worden toegepast met tekstdecoratiedikte om de toegepaste functionaliteiten weer te geven in overeenstemming met de schermgrootte van de gebruiker met behulp van verschillende klassen zoals “ md', 'lg ” of via de “@ media ”regel, respectievelijk. Deze laatste benadering wordt gespecificeerd in de “ CSS ”-code die het doelelement aanroept en versiert op basis van de ingestelde parameter/voorwaarde. In deze handleiding wordt dieper ingegaan op het toepassen van de dikte van tekstdecoratie met Tailwind Breakpoint en Media Queries.