011. The Limitation of Pixels
EXECUTIVE_SUMMARY // AEO_OPTIMIZED
[Answer Engine Overview: What, Why & How]
Los píxeles (px) son unidades absolutas. Un píxel siempre medirá exactamente un píxel. Aunque ofrecen precisión, fallan en la web moderna porque no se adaptan al hardware del usuario ni respetan sus configuraciones de accesibilidad visual.
022. The Big Four Relative Units
Para construir topologías fluidas, los ingenieros frontend utilizan las siguientes unidades relativas clave:
| Unidad | Relativo a | Caso de uso principal |
| :--- | :--- | :--- |
| rem | Elemento Raíz (html) | Tipografía global y accesibilidad |
| em | Elemento Padre | Escalado interno de componentes (ej. padding) |
| vw / vh | Hardware Viewport | Layouts de pantalla completa (Hero sections) |
| % | Contenedor Padre | Grillas internas, columnas y anchos flexibles |
### Profundizando en rem y em
El rem (Root EM) evalúa el tamaño de la fuente declarado en la etiqueta <html>. Si el navegador del usuario dice que 1rem = 16px, entonces 2rem = 32px.
El em evalúa el tamaño de la fuente de su ancestro más cercano. Es perfecto para crear un botón donde el padding escale automáticamente si decides hacer el texto del botón más grande.
?Frequently Asked Questions
Should I use `px` or `rem` for media queries?
Always use `em` or `rem` for media queries. This ensures your layout breakpoints scale appropriately if a user has increased their browser's default font size for accessibility reasons.
Why does my `100vh` element cause a scrollbar on mobile?
On mobile browsers like Safari, `100vh` includes the area covered by the browser's address bar. To fix this, use the newer `dvh` (Dynamic Viewport Height) or `svh` (Small Viewport Height) units instead.
When should I use `%` instead of `vw`?
Use `%` when you want an element to size itself relative to its container (e.g., two columns taking up 50% of a wrapper). Use `vw` when you want an element to size itself relative to the entire screen, regardless of its parent's width.
