Este artículo explicará cómo utilizar el punto de interrupción y la consulta de medios junto con la propiedad de posición en Tailwind.
¿Cómo utilizar puntos de interrupción y consultas de medios con la propiedad de posición?
Los puntos de interrupción son los bloques centrales para crear un diseño responsivo definitivo. Se utiliza para hacer que el diseño se adapte a diferentes tamaños de pantalla. Las consultas de medios se utilizan para aplicar estilos específicos a elementos según la resolución de la pantalla. El atributo de posición se puede aplicar junto con estos para optimizar la salida.
Paso 1: aplicar la propiedad de posición con puntos de interrupción y consultas de medios
En este paso, se inserta el programa para aplicar la propiedad de posición a lo largo de los puntos de interrupción o consultas de medios sobre el ' seleccionado ' pag ' elemento:
< cuerpo clase = 'pizarra-bg-500' >
< div clase = 'texto-amarillo-300 p-4 lg:p-8' >
< pag clase = 'md relativo:absoluto md:text-lg md:translate-x-4 md:translate-y-4 lg:text-xl lg:static lg:translate-x-4 lg:translate-y-4 ' > Este texto tendrá diferentes tamaños de fuente según el tamaño de la pantalla. Será más pequeño en pantallas pequeñas, mediano en pantallas medianas y más grande en pantallas grandes. < / pag >
< / div >
< / cuerpo >
En este código:
- “ bg-pizarra-500 ” establece el color de fondo en gris.
- “ texto-amarillo-300 ”cambia el color del texto a amarillo.
- “ página 4 ”agrega un relleno de 4px.
- “ LG: página 8' Agrega un relleno de 8px en pantallas grandes.
- La posición inicial se establece en relación con la página principal mediante el botón ' relativo ' clase.
- “ md: texto-lg ”agranda el texto en una pantalla de tamaño mediano.
- “md:absoluto” modifica la posición del texto de relativa a absoluta en una pantalla de tamaño mediano.
- “ md: traducir-x-4” y “md:traducir-y-4” mueva el texto 4px hacia abajo y hacia la derecha en un tamaño de pantalla mediano.
- “ lg:texto-xl ”cambia el tamaño del texto a extragrande en una pantalla de gran tamaño.
- “ lg:estático 'cambia la posición del texto con respecto a la página principal de absoluta a estática en una pantalla de gran tamaño
- “ lg: traducir-x-4 ' y ' lg:translate-y-4 ”mueve el texto 4px hacia abajo y hacia la derecha en un tamaño de pantalla grande.
Paso 2: verificar la salida
Obtenga una vista previa de la página web creada por el código anterior y ajuste el tamaño de la pantalla para ver el cambio como:
Se puede ver que el texto muestra un comportamiento receptivo en pantallas de tamaño mediano y grande.
Conclusión
Para utilizar puntos de interrupción y consultas de medios en Tailwind, aplique el punto de interrupción y establezca la consulta de medios en cada punto de interrupción, y también cambie la propiedad de posición en diferentes puntos de interrupción de la pantalla. Los desgloses predeterminados son “ sm ”, “ Maryland ”, “ LG ', y ' SG ”. Este blog ha mostrado cómo utilizar el punto de interrupción y la consulta de medios con la propiedad de posición en Tailwind.