Com aplicar el gruix de la decoració del text amb punts d'interrupció i consultes multimèdia

Com Aplicar El Gruix De La Decoracio Del Text Amb Punts D Interrupcio I Consultes Multimedia



Mentre dissenyava un lloc web responsive, el Tailwind ' Punts d'interrupció ' i ' Consultes de mitjans ” juguen un paper clau en l'aplicació de múltiples funcionalitats que es poden adaptar a diferents mides de pantalla de manera convenient. Aquestes característiques s'han d'especificar mitjançant diverses classes, és a dir, ' md (pantalles de mida mitjana)', 'lg (pantalla de mida gran)' o a través de '@media ” regla que afegeix les funcionalitats en funció de la condició especificada.

Aquest article cobreix el contingut següent:







Com aplicar el gruix de la decoració del text amb punts d'interrupció i consultes multimèdia?

El ' Decoració del text Gruix ' es pot aplicar amb l'ajuda del ' text-decoració-gruix ” propietat seguida del valor de gruix objectiu en píxels. Aquests píxels poden ser ' 1px', '2px', '4px' o '8px ”. El ' Punts d'interrupció ' s'apliquen per adaptar diverses funcionalitats aplicades d'acord amb la mida de la pantalla de l'usuari mitjançant el ' md (pantalles de mida mitjana)', 'lg (pantalla de mida gran) ” classes, etc. El “ Consultes de mitjans habilita els estils d'implementació condicionals basats en un conjunt de paràmetres del navegador i del sistema operatiu a través del '@ mitjans de comunicació ” regla.



Exemple 1: aplicació del gruix de la decoració del text amb punts de ruptura de vent de cua

Aquest exemple estableix el gruix de la decoració del text en diferents punts per aplicar l'estil que varia segons les mides de la pantalla:




< html >
< cap >
< meta conjunt de caràcters = 'utf-8' >
< meta nom = 'mirador' contingut = 'amplada=amplada del dispositiu, escala inicial=1' >
< títol >< / títol >
< guió src = 'https://cdn.tailwindcss.com' >< / guió >
< / cap >
< cos >
< àrea de text classe = 'subratlla md:decoration-8 lg:box-decoration-slice text-black text-2xl' id = 'temp' > Això és Linuxhint < / àrea de text >
< / cos >
< / html >

D'acord amb aquest fragment de codi, apliqueu els passos que s'indiquen a continuació:





  • Primer, incloeu la ruta CDN per aplicar les funcionalitats de Tailwind.
  • A continuació, feu un '< àrea de text >” i incorporeu els nivells de gruix de la decoració del text indicats a les pantalles predeterminades i mitjanes mitjançant el “ md ” classe, respectivament.
  • El ' text-negre ' i ' text-2xl Les classes assignen el color (negre) i la mida de la font, és a dir, 2xl al text, respectivament.

Sortida

A partir d'aquest resultat, es pot donar a entendre que el gruix de la decoració del text s'adapta adequadament a la mida variable de la pantalla.



Exemple 2: aplicació del gruix de la decoració del text amb consultes multimèdia Tailwind

El “@ mitjans de comunicació ” s'utilitza a les consultes de mitjans per implementar diversos estils per a diferents tipus/dispositius de suports. Aquesta demostració en particular utilitza aquestes consultes multimèdia per decorar el gruix del text en funció d'un paràmetre/condició especificat:


< html >
< cap >
< meta conjunt de caràcters = 'utf-8' >
< meta nom = 'mirador' contingut = 'amplada=amplada del dispositiu, escala inicial=1' >
< títol >< / títol >
< guió src = 'https://cdn.tailwindcss.com' >< / guió >
< / cap >
< cos >
< h1 id = 'temp' >Això és Linuxhint< / h1 >
< / cos >
< / html >
< estil tipus = 'text/css' >
#temp {
text-decoració: subratllat;
text- alinear : centre;
}
@ mitjans de comunicació ( màxim- amplada : 550 píxels ) {
#temp {
gruix de la decoració del text: 4px;
} }
< / estil >

En aquest bloc de codi, tingueu en compte les metodologies que es proporcionen a continuació:

  • De la mateixa manera, inclou el camí CDN.
  • A continuació, afegiu un '< h1 >' element que té l''id' indicat.
  • A la part CSS del codi, dins del '< estil >”, estilitza l'encapçalament inclòs.
  • A més, creeu el '@ mitjans de comunicació ' regla que aplica una condició tal que sempre que l'amplada de la pantalla sigui ' 550 píxels ”, el gruix de la decoració del text s'estableix en “ 4 ” píxels.
  • És tal que després que l'amplada de la pantalla superi aquest límit, el text es subratllarà simplement.

Sortida

Aquest resultat significa que la regla '@media', és a dir, les consultes de mitjans s'aplica d'acord amb l'amplada de la pantalla.

Conclusió

Els punts d'interrupció i les consultes de mitjans es poden aplicar amb un gruix de decoració de text per mostrar les funcionalitats aplicades d'acord amb la mida de la pantalla de l'usuari mitjançant diverses classes com ara ' md', 'lg ” o mitjançant el “@ mitjans de comunicació ” regla, respectivament. Aquest últim enfocament s'especifica a la ' CSS ” codi que invoca l'element objectiu i el decora en funció del paràmetre/condició establert. Aquesta guia va elaborar sobre l'aplicació del gruix de la decoració del text amb el punt d'interrupció de Tailwind i les consultes de mitjans.