HTML y CSS
Test de CSS responsive y layout
Practica 50 casos de layout responsive con flexbox, grid, media queries, container queries, imágenes fluidas y control de desbordamientos.
Cada intento mezcla preguntas y respuestas para evitar patrones memorizables.
Cargando preguntas…
Qué vas a practicar
Este banco plantea problemas de adaptación a distintos espacios disponibles. Trabaja viewport, unidades flexibles, imágenes, flexbox, grid, media queries, container queries, orden visual, desbordamientos y criterios de accesibilidad para diseños que deben responder sin perder contenido.
- Configurar viewport y media queries con criterios basados en contenido.
- Distribuir componentes con ejes, wrapping y factores flexibles.
- Definir cuadrículas explícitas, pistas fluidas y colocación automática.
- Evitar desbordamientos y adaptar imágenes, texto y componentes a su contenedor.
Preguntas de ejemplo
Los ejemplos siguientes pertenecen al banco interactivo y conservan exactamente la misma respuesta y explicación.
1¿Qué meta etiqueta permite que el ancho del layout coincida con el ancho del dispositivo móvil?
Respuesta: <meta name="viewport" content="width=device-width, initial-scale=1">
Explicación: La configuración del viewport evita que el navegador móvil simule un lienzo de escritorio más ancho. Sin esta configuración, algunos navegadores móviles maquetan sobre un viewport virtual más ancho y después reducen la página.
2Para controlar la distribución, ¿qué propiedad alinea flex items en el eje transversal de una sola línea?
Respuesta: align-items
Explicación: align-items establece la alineación transversal predeterminada de los items. La propiedad actúa sobre el contenedor o sobre el item según el caso; intercambiarlas no produce el mismo resultado.
3¿Por qué se considera CSS Grid bidimensional?
Respuesta: Controla filas y columnas de forma conjunta
Explicación: Grid permite definir y coordinar ambos ejes del diseño. El algoritmo de colocación automática no reemplaza la necesidad de mantener un orden lógico del contenido.
4¿Qué enfoque suele ser adecuado para una barra de herramientas en una sola fila?
Respuesta: Flexbox
Explicación: Flexbox resulta natural para distribuir y alinear componentes a lo largo de un eje. La técnica debe responder a la estructura requerida, evitando tablas o posicionamiento absoluto para maquetación general.
5¿Qué propiedades lógicas sustituyen a margin-left y margin-right en distintos modos de escritura?
Respuesta: margin-inline-start y margin-inline-end
Explicación: Las propiedades lógicas se adaptan a la dirección del texto y al modo de escritura. Las propiedades lógicas siguen los ejes de escritura, por lo que funcionan también en idiomas de derecha a izquierda.
6Necesitas condicionar estilos al viewport. ¿Qué media query detecta que el viewport es más ancho que alto?
Respuesta: @media (orientation: landscape)
Explicación: La característica orientation compara las dimensiones del viewport y usa landscape cuando el ancho es mayor que la altura.
Cómo aprovechar la práctica
Analiza primero si el problema pertenece a un eje, a dos dimensiones, al viewport o al contenedor. Después elige la herramienta que preserve contenido, orden lógico y legibilidad; evita fijar tamaños que solo funcionan en una captura concreta.
Fuentes y alcance
Las preguntas se han revisado con CSS Snapshot 2026 y las especificaciones vigentes de Flexbox, Grid, media queries y container queries. Revisión editorial: 19 de agosto de 2026.