Al diseñar un sitio web responsivo, Tailwind “ Puntos de interrupción ' y ' Preguntas de los medios “Juegan un papel clave en la aplicación de múltiples funcionalidades que se pueden adaptar cómodamente a diferentes tamaños de pantalla. Estas características deben especificarse a través de varias clases, es decir, ' md (pantallas de tamaño mediano)”, “lg (pantalla de tamaño grande)” o a través de “@media ”Regla que agrega las funcionalidades en función de la condición especificada.
Este artículo cubre el siguiente contenido:
- ¿Cómo aplicar el grosor de la decoración del texto con puntos de interrupción Tailwind y consultas de medios?
- Aplicar el grosor de la decoración del texto con puntos de interrupción de viento de cola.
- Aplicación del grosor de la decoración del texto con Tailwind Media Queries.
¿Cómo aplicar el grosor de la decoración del texto con puntos de interrupción Tailwind y consultas de medios?
El ' Decoración del texto Grosor ” se puede aplicar con la ayuda del “ texto-decoración-grosor ”Propiedad seguida del valor del espesor objetivo en píxeles. Estos píxeles pueden ser “ 1 px”, “2 px”, “4 px” u “8 px” ”. El ' Puntos de interrupción ”se aplican para adaptar varias funcionalidades aplicadas de acuerdo con el tamaño de la pantalla del usuario utilizando el botón “ md (pantallas de tamaño mediano)”, “lg(pantalla de tamaño grande) ' clases, etc. El ' Preguntas de los medios ”habilita estilos de implementación condicional basados en un conjunto de parámetros del navegador y del sistema operativo a través de “@ medios de comunicación ' regla.
Ejemplo 1: Aplicar el grosor de la decoración del texto con puntos de interrupción de viento de cola
Este ejemplo establece el grosor de la decoración del texto en diferentes puntos para aplicar el estilo que varía según los tamaños de pantalla:
< HTML >
< cabeza >
< meta juego de caracteres = 'utf-8' >
< meta nombre = 'ventana gráfica' contenido = 'ancho = ancho del dispositivo, escala inicial = 1' >
< título >< / título >
< guion src = 'https://cdn.tailwindcss.com' >< / guion >
< / cabeza >
< cuerpo >
< área de texto clase = 'subrayado md:decoración-8 lg:caja-decoración-rebanada de texto-texto negro-2xl' identificación = 'temperatura' > Esto es Linux < / área de texto >
< / cuerpo >
< / HTML >
De acuerdo con este fragmento de código, aplique los pasos que se indican a continuación:
- Primero, incluya la ruta CDN para aplicar las funcionalidades de Tailwind.
- Luego, haz un “< área de texto >” e incorpore los niveles de espesor de decoración de texto indicados en las pantallas predeterminadas y medianas a través del botón “ Maryland ”clase, respectivamente.
- El ' texto-negro ' y ' texto-2xl Las clases asignan el color (negro) y el tamaño de fuente, es decir, 2xl al texto, respectivamente.
Producción
De este resultado se puede deducir que el grosor de la decoración del texto se adapta adecuadamente al tamaño variable de la pantalla.
Ejemplo 2: Aplicar el grosor de la decoración del texto con Tailwind Media Queries
El '@ medios de comunicación La regla se utiliza en consultas de medios para implementar varios estilos para diferentes tipos/dispositivos de medios. Esta demostración en particular utiliza estas consultas de medios para decorar el grosor del texto según un parámetro/condición específicos:
< HTML >
< cabeza >
< meta juego de caracteres = 'utf-8' >
< meta nombre = 'ventana gráfica' contenido = 'ancho = ancho del dispositivo, escala inicial = 1' >
< título >< / título >
< guion src = 'https://cdn.tailwindcss.com' >< / guion >
< / cabeza >
< cuerpo >
< h1 identificación = 'temperatura' >Esto es Linuxhint< / h1 >
< / cuerpo >
< / HTML >
< estilo tipo = 'texto/css' >
#temperatura {
decoración de texto: subrayado;
texto- alinear : centro;
}
@ medios de comunicación ( max- ancho :550px ) {
#temperatura {
espesor-decoración-texto: 4px;
} }
< / estilo >
En este bloque de código, considere las metodologías proporcionadas a continuación:
- Asimismo, incluya la ruta CDN.
- Luego, agregue un “< h1 >” elemento que tiene el “id” indicado.
- En la parte CSS del código, dentro del “< estilo >”, aplique estilo al encabezado incluido.
- Además, cree el “@ medios de comunicación 'regla que aplica una condición tal que mientras el ancho de la pantalla sea' 550px ”, el grosor de la decoración del texto se establece en “ 4 ”píxeles.
- Es tal que después de que el ancho de la pantalla supere este límite, el texto simplemente quedará subrayado.
Producción
Este resultado significa que la regla '@media', es decir, consultas de medios, se aplica de acuerdo con el ancho de la pantalla.
Conclusión
Los puntos de interrupción y las consultas de medios se pueden aplicar con un grosor de decoración de texto para mostrar las funcionalidades aplicadas de acuerdo con el tamaño de la pantalla del usuario utilizando varias clases como ' md', 'lg ” o a través de “@ medios de comunicación ”regla, respectivamente. Este último enfoque se especifica en el “ CSS 'Código que invoca el elemento de destino y lo decora según el parámetro/condición establecido. Esta guía explica detalladamente cómo aplicar el grosor de la decoración del texto con Tailwind Breakpoint y Media Queries.