Practicum · Quiz de repaso R4
px, porcentajes, viewport (vw/vh) y rem.
Nota: preguntas de repaso generadas a partir de la transcripción (../transcripciones/transcripcion-unidades-de-medida.txt). Las respuestas se verificaron ejecutando el código (Python/JS) o por traza rigurosa (Java/R/booleanos).
En pantallas modernas de alta densidad (Retina), ¿a qué equivale 1px en CSS?
Respuesta correcta: B) A la unidad básica más pequeña, que puede corresponder a varios píxeles físicos
Por qué: Antes 1px CSS = 1px físico; hoy, con ppi altos, un px CSS agrupa varios físicos.
Si el elemento padre mide 300px de ancho y al hijo se le da 50% de ancho, ¿cuánto mide el hijo?
Respuesta correcta: C) 150px
Por qué: El % se calcula sobre el padre: 50% de 300px = 150px.
¿Respecto a qué es relativo el porcentaje (%) en CSS?
Respuesta correcta: A) Únicamente al elemento padre
Por qué: A diferencia del px, no es rígido: depende del tamaño del padre.
¿Qué es el viewport?
Respuesta correcta: B) El área visible de la página en un momento dado, sin hacer scroll
Por qué: Cambia en tiempo real (ej.: al girar el teléfono a horizontal).
¿Qué significan 100vw y 100vh?
Respuesta correcta: B) El ancho y alto totales de la ventana del navegador
Por qué: vw = 1% del ancho del viewport; vh = 1% del alto.
¿Respecto a qué es relativo rem?
Respuesta correcta: C) Solamente al tamaño de fuente del elemento raíz (<html>)
Por qué: Por defecto todos los navegadores usan 16px en <html>, así que 1rem = 16px.
Con los valores por defecto del navegador, ¿cuánto vale 2rem?
Respuesta correcta: C) 32px
Por qué: 2 × 16px (raíz) = 32px. El padre no influye en rem (a diferencia de em).
¿Cuál es la diferencia clave entre rem y el porcentaje (%)?
Respuesta correcta: B) rem solo mira la raíz e ignora al padre; el % depende únicamente del padre
Por qué: Por eso rem da medidas consistentes en todo el documento y % medidas relativas al contenedor.
¿Qué es ppi según el material?
Respuesta correcta: B) La densidad de píxeles: los píxeles físicos son cada vez más pequeños por el avance tecnológico
Por qué: Por eso 1px CSS ya no equivale a 1px físico en pantallas modernas.
Si el padre mide 200px y al hijo se le da 25%, ¿cuánto mide el hijo?
Respuesta correcta: B) 50px
Por qué: 25% de 200px = 50px. Misma regla del ejemplo 300px/50% del slide.
¿Qué es 50vh?
Respuesta correcta: B) La mitad del alto del viewport
Por qué: vh = 1% del alto del viewport, independiente del padre.
Con los valores por defecto, ¿cuánto vale 3rem?
Respuesta correcta: C) 48px
Por qué: 3 × 16px (raíz) = 48px.
Con los valores por defecto, ¿cuánto vale 0.5rem?
Respuesta correcta: C) 8px
Por qué: 0.5 × 16px = 8px. rem admite decimales.
El material advierte: 16 pixeles no se ven igual en una laptop que en una TV de 60 pulgadas. ¿Qué enseña esa advertencia?
Respuesta correcta: B) Que las medidas absolutas se perciben distinto según la pantalla, por eso conviene entender las relativas
Por qué: Es el cierre del slide REM y el puente al slide ¿Cuando utilizarlos?
Según el slide de Objetivos, ¿para qué es este material?
Respuesta correcta: B) Apoyo para estudio, complementar unidades de medida e introducir layouts avanzados
Por qué: Los tres objetivos literales del slide 2.
El slide afirma: "1px es la unidad básica más pequeña que usamos en css". ¿Qué significa?
Respuesta correcta: B) Que es la unidad mínima de referencia, aunque en pantalla agrupe varios físicos
Por qué: Cierre del slide PX: unidad básica, no necesariamente un físico.
El slide dice que el porcentaje "no es rígido o fijo" a diferencia de los píxeles. ¿Qué quiere decir?
Respuesta correcta: B) Que su valor final depende del padre y se adapta si el padre cambia; el px es absoluto
Por qué: Flexible vs rígido: la base del diseño fluido.
¿Qué le pasa al viewport cuando giras el teléfono a horizontal?
Respuesta correcta: B) Cambia en tiempo real: deja de ser pequeño y alargado
Por qué: Ejemplo literal del slide: el viewport no es estático.