Resolución del navegador
Es el tamaño del área visible de tu navegador (viewport). A diferencia de la resolución física de la pantalla, esta cambia si redimensionas la ventana.
Herramienta gratuita para desarrolladores
Detector de Resolución de Pantalla y Media Queries CSS
Conoce al instante la resolución exacta de tu dispositivo, el breakpoint activo y las reglas @media de CSS que aplican a tu pantalla. Copia el código listo para usar en tus proyectos.
Información de tu pantalla en tiempo real
Tu Resolución Actual
—×—
Detectando dispositivo…
Pantalla física
— × — px
Orientación
—
Densidad de píxeles
— DPR
Aspect Ratio
—
Profundidad de color
— bits
Tipo de dispositivo
—
📐 Breakpoint Activo
Detectamos en qué rango de tamaño se encuentra tu pantalla. Estos son los breakpoints estándar utilizados en la mayoría de los frameworks modernos.
Detectando…
—
| Breakpoint | Rango | Clase Tailwind | Estado |
|---|
🎯 Media Queries que Aplican
A continuación verás qué reglas @media de CSS están activas en este momento en tu pantalla. Las que cumplen tu resolución se marcan en verde y pulsan.
📋 Código CSS listo para usar
Este es el bloque @media que aplica a tu pantalla. Cópialo y úsalo en tus hojas de estilo para personalizar el diseño en esta resolución.
💡 ¿Qué significa cada dato?
Una breve guía para entender los conceptos clave en el diseño web responsivo.
Densidad de píxeles (DPR)
El Device Pixel Ratio indica cuántos píxeles físicos representan a un píxel CSS. Pantallas Retina suelen tener DPR de 2 o 3, mostrando imágenes más nítidas.
Media Queries
Reglas CSS que aplican estilos solo cuando se cumplen ciertas condiciones del dispositivo, como un ancho mínimo o máximo. Son la base del diseño responsivo.
Breakpoints
Puntos donde el diseño cambia de forma significativa para adaptarse a distintos tamaños. Los más comunes: móvil, tableta, laptop y escritorio.
Orientación
Indica si la pantalla es más ancha que alta (apaisada/landscape) o más alta que ancha (vertical/portrait). Útil para adaptar layouts en móviles y tablets.
Detección en tiempo real
Cambia el tamaño de tu ventana ahora mismo y verás cómo los valores se actualizan al instante. Ideal para probar tus diseños responsivos.
❓ Preguntas Frecuentes
Resolvemos las dudas más comunes sobre resoluciones de pantalla y media queries.
La resolución de pantalla es el número de píxeles que componen la imagen en una pantalla, expresada como ancho × alto. Por ejemplo, una pantalla Full HD tiene una resolución de 1920 × 1080 píxeles. Esta herramienta detecta tanto la resolución del viewport (área visible del navegador) como la resolución física de tu monitor.
Las media queries son una característica de CSS que permite aplicar estilos diferentes según las características del dispositivo, como el ancho de la pantalla, la orientación o la densidad de píxeles. Son esenciales para el diseño web responsivo y permiten que tu sitio se vea bien en cualquier dispositivo.
Un breakpoint es un punto de quiebre, es decir, un valor específico de ancho de pantalla en el que el diseño cambia para adaptarse mejor al dispositivo. Los breakpoints más comunes son móvil (hasta 640px), tableta (641-1024px) y escritorio (más de 1024px). Frameworks como Tailwind CSS, Bootstrap y Material UI definen sus propios breakpoints.
El navegador reporta píxeles CSS (también llamados píxeles lógicos), mientras que la pantalla tiene píxeles físicos. En pantallas Retina o de alta densidad, un píxel CSS puede equivaler a 2 o 3 píxeles físicos. Además, si tu ventana no está maximizada o tienes barras de herramientas, la ventana mostrará valores menores que la pantalla completa.
¡Por supuesto! Esta herramienta es totalmente gratuita y está pensada para ayudar a diseñadores web y desarrolladores a planear, probar y depurar sus diseños responsivos. En EPCON desarrollamos soluciones de software a la medida; si tu proyecto necesita algo más complejo, contáctanos.
¿Tienes una idea? Convirtámosla en realidad
En EPCON desarrollamos sitios web, apps móviles, eCommerce y soluciones en la nube. Más de 10 años creando software para las personas.