Constructor de media queries

• Generación instantánea de media queries: crea y previsualiza media queries CSS adaptables en tiempo real. Nuestro constructor de media queries genera la regla @media exacta mientras configuras cada breakpoint: sin esperas, sin llamadas al servidor y sin conjeturas.
• Constructor de media queries online seguro: toda la generación de media queries ocurre localmente en tu navegador. Tu código CSS y tus configuraciones de breakpoints nunca salen de tu dispositivo, lo que garantiza un 100 % de privacidad cada vez que usas nuestro constructor de media queries online.
• Constructor de media queries online sin instalación: usa nuestro constructor de media queries directamente en cualquier navegador, sin descargas, plugins ni software. Crea breakpoints adaptables para cualquier proyecto desde cualquier dispositivo, en cualquier lugar y totalmente gratis.
• Múltiples opciones de breakpoints: configura min-width, max-width, rango (mín. + máx.), min-height, max-height, orientación o condiciones totalmente personalizadas. Elige unidades px, em o rem. Carga presets de Bootstrap 5, Tailwind CSS o mobile-first con un clic.

• Diseño web adaptable: usa nuestro constructor de media queries para definir breakpoints para layouts de móvil, tableta y escritorio. Genera reglas min-width y max-width que adaptan tu layout, tipografía y espaciado a cualquier tamaño de pantalla sin escribir una sola línea de CSS a mano.
• Configuración de breakpoints de frameworks: carga los presets de Bootstrap 5 o Tailwind CSS con un clic para generar exactamente los breakpoints que usan esos frameworks. Personaliza los valores para que coincidan con tu sistema de diseño y copia el CSS directamente en tu proyecto.
• Desarrollo mobile-first: crea hojas de estilo mobile-first generando media queries min-width que mejoran progresivamente el layout a medida que crece el viewport. Nuestro constructor de media queries facilita la visualización del rango de breakpoints en la regla antes de escribir código.
• Segmentación de tabletas y orientación: apunta a orientaciones concretas del dispositivo con media queries de retrato y paisaje. Usa el tipo de consulta de rango para aislar viewports de tamaño tableta entre dos breakpoints, asegurando que los estilos se apliquen solo a la clase de dispositivo prevista.
• Generación de hojas de estilo para impresión: cambia el tipo de medio a «print» para generar media queries específicas de impresión. Controla qué estilos se aplican cuando los usuarios imprimen tu página: oculta la navegación, ajusta los tamaños de fuente y elimina los fondos para obtener una impresión limpia.
• Documentación de sistemas de diseño: documenta los breakpoints de tu sistema de diseño generando un archivo CSS completo con breakpoints con nombre y comentarios. Descarga el archivo .css y compártelo con tu equipo como referencia para un comportamiento adaptable coherente en todos los componentes.

Una media query CSS es una regla condicional que aplica estilos solo cuando el navegador o el dispositivo cumple una condición determinada, como un ancho de viewport mínimo, una altura de pantalla máxima o la orientación del dispositivo. La sintaxis es @media screen and (min-width: 768px) { }. Las media queries son la base del diseño web adaptable, ya que permiten que una sola hoja de estilos adapte layouts, tipografía y espaciado a cualquier tamaño de pantalla. Nuestro constructor de media queries genera estas reglas visualmente para que puedas configurar breakpoints sin memorizar la sintaxis.

1. Añade tus breakpoints: haz clic en «Añadir breakpoint» o carga un preset (Bootstrap 5, Tailwind CSS, Mobile First) para rellenar un conjunto de breakpoints con nombre. Cada breakpoint tiene su propio panel de configuración.
2. Configura cada breakpoint: elige el tipo de medio (screen, print, all), el tipo de consulta (min-width, max-width, rango, altura, orientación o personalizada), introduce tus valores y selecciona la unidad (px, em, rem). La consulta generada se actualiza en vivo mientras escribes.
3. Copia o descarga el CSS: el constructor de media queries genera el CSS completo de todos los breakpoints. Copia consultas individuales o descarga toda la hoja de estilos como archivo .css.

• Consultas min-width: aplican estilos a partir de un ancho de viewport mínimo y hacia arriba, el enfoque estándar del diseño adaptable mobile-first.
• Consultas max-width: aplican estilos hasta un ancho de viewport máximo, se usan en enfoques desktop-first para sobrescribir estilos en pantallas más pequeñas.
• Consultas de rango (mín. + máx.): combinan min-width y max-width para apuntar a un rango de viewport concreto, como estilos solo para tabletas entre 768px y 1023px.
• Consultas de orientación: apuntan a la orientación vertical u horizontal independientemente del tamaño del viewport, útiles para ajustes de layout en tabletas.

La unidad que elijas para los breakpoints de las media queries afecta a cómo responden a las preferencias del usuario. Los breakpoints en px son absolutos y no escalan con la configuración de tamaño de fuente del navegador. Los breakpoints en em son relativos al tamaño de fuente base del navegador (normalmente 16px), así que 48em equivalen a 768px con el tamaño predeterminado, pero escalan si el usuario cambia el tamaño de fuente de su navegador. rem se comporta igual que em en las media queries (ambos hacen referencia al valor predeterminado del navegador, no al elemento raíz). Muchos desarrolladores centrados en la accesibilidad prefieren breakpoints en em o rem porque respetan las preferencias de tamaño de fuente del usuario, garantizando que los layouts se reajusten correctamente para quienes aumentan su tamaño de fuente predeterminado.