Consultas de ancho, alto y orientación
Dirija las media features a dimensiones específicas del viewport y a la orientación del dispositivo.
Consultas de ancho, alto y orientación es una lección gratuita de CSS Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de CSS Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de CSS Academy incluye 4 lecciones en total.
Característica de medios width
La característica width selecciona el ancho del viewport. Use min-width y max-width para definir rangos.
<div class="box">width feature demo</div>
Característica de medios height
La característica height selecciona la altura del viewport. Es útil para viewports bajos, como los de teléfonos en orientación horizontal, donde el espacio vertical es limitado.
<div class="hero">Hero (grows on tall viewports)</div>
Patrón para viewports bajos
Detecte los viewports bajos y reduzca el padding o las alturas que podrían hacer que el contenido se desborde:
<div class="modal">Modal content that scrolls when the viewport is short. Lorem ipsum dolor sit amet, consectetur.</div>
orientation: portrait y landscape
La característica orientation detecta si el viewport es más alto (portrait) o más ancho (landscape) que en la otra dirección.
<div class="hero">Orientation-aware hero</div>
Densidad de píxeles del dispositivo
Seleccione pantallas de alta densidad de píxeles (Retina) con la característica resolution o con la característica no estándar, pero ampliamente compatible, -webkit-device-pixel-ratio.
<div class="logo"></div>
Característica aspect-ratio
Seleccione relaciones de aspecto específicas del viewport. Es útil para centrar el contenido de forma diferente en viewports 4:3 y 16:9.
<div class="video"></div>
Capacidad de hover
La característica hover: hover detecta si el dispositivo de entrada principal es un puntero preciso capaz de hacer hover. Es útil para aplicar estilos específicos a dispositivos táctiles.
<div class="card">Card (hover me)</div>
<div class="card is-hovered">Card (hover state shown)</div>
Característica pointer
pointer: fine representa un cursor de ratón preciso; pointer: coarse representa un dedo o un lápiz óptico. Es útil para ajustar el tamaño de los objetivos táctiles.
<button>Tap target</button>
Combinar width y height
Cree reglas específicas para teléfonos en orientación horizontal combinando min-width con max-height:
<div class="nav">Nav bar</div>
Dimensiones del viewport y del dispositivo
Las media queries de CSS seleccionan el viewport (la ventana del navegador), no las dimensiones físicas de la pantalla del dispositivo. Cambiar el tamaño de la ventana del navegador en un ordenador modifica el ancho del viewport en tiempo real.
Unidades del viewport y media queries
Las media queries y las unidades del viewport (vw, vh) responden a las mismas dimensiones del viewport. Use media queries para cambiar el diseño y unidades del viewport para definir tamaños fluidos dentro de un diseño.
Comprobación rápida
¿Qué característica de medios detecta si un dispositivo tiene un puntero preciso capaz de hacer hover sobre los elementos?
Resumen
Entre las características de medios se incluyen width, height, orientation, resolution, hover y pointer. Úselas para adaptar los diseños a las dimensiones del viewport y a las capacidades del dispositivo. Las características hover y pointer permiten distinguir entre dispositivos táctiles y dispositivos con ratón, más allá del simple tamaño de la pantalla.
Preguntas frecuentes
¿La lección «Consultas de ancho, alto y orientación» es gratis?
Sí — el texto completo de «Consultas de ancho, alto y orientación» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de CSS Academy, actualiza a CoddyKit PRO. El curso de CSS Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Consultas de ancho, alto y orientación»?
Dirija las media features a dimensiones específicas del viewport y a la orientación del dispositivo. Practicas CSS Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar CSS Academy?
No se requiere experiencia previa. CSS Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «Consultas de ancho, alto y orientación»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de CSS Academy?
Sí. Cada lección de CSS Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Sintaxis y puntos de ruptura habituales
- Consultas de ancho, alto y orientación
- Prefers-Color-Scheme y Prefers-Reduced-Motion
- Combinación de varias media queries