Generador de consultas CSS

Generador de consultas CSS

Construir CSS preciso @media reglas para cualquier punto de interrupción y combinación de características sin memorizar sintaxis. Elija un preset de marco, elija el tipo de consulta y active las características adicionales que necesite — la herramienta une un bloque válido con tanto sintaxis clásica como moderna de rango.

Cómo Usar

1. Elige un Preset de marco — Bootstrap 5, Tailwind CSS, Diseño de Material o Personalizado — luego elija el ancho del punto de interrupción.
2. Elija la Tipo de consulta: ancho mínimo (primero móvil), ancho máximo (primero de escritorio) o un rango entre dos anchos.
3. Selecciona el Estilo de sintaxis: clásico min-width / max-width o la nueva sintaxis de rangos de consultas de medios nivel 4 (width >= ...).
4. Alternar cualquier Características adicionales que desee combinado con el punto de interrupción: orientación, preferencia de esquema de color, preferencia de movimiento reducido, hover o pointer.
5. Copia el generado @media bloque desde el panel de salida y pégselo en su hoja de estilo.

Características

• Preestablecimientos de marcos – Puntos de interrupción de un clic para Bootstrap 5, Tailwind CSS y Diseño de Material, más un modo personalizado para cualquier valor en píxeles.
• Tres modos de consulta – Generar primero móvil min-width, primero de escritorio max-width, o una consulta precisa que dirige a una clase de dispositivo específica.
• Sintaxis clásica y moderna – Alternar entre reglas tradicionales min-width/max-width y la sintaxis más limpia de rangos de consultas de medios nivel 4 (width >= X).
• Características combinadas de medios – Superponer orientación, preferencia de esquema de color, preferencia de movimiento reducido, capacidad de hover y precisión del pointer sobre cualquier consulta de ancho.
• Actualizaciones en tiempo real – La salida se regenera mientras cambian los inputs, así que puede ver inmediatamente combinaciones diferentes.
• Copiar y descargar – Obtener el CSS con un clic o guardarlo como un .css archivo para su proyecto.