Píxel
La unidad con la que se miden las cosas en una pantalla. Se abrevia px.
✦Apagada: responde bien la pregunta del final para encenderla
También lo verás como: píxel · píxeles · pixeles · resolución · ancho de pantalla
Analogía
Los cuadraditos de una hoja cuadriculada. Decir "este botón mide 200 px de ancho" es decir "ocupa 200 cuadraditos".
Lo que hay que saber
- Una pantalla es una rejilla de puntos de luz; cada punto es un píxel.
- En una web, los tamaños se dan casi siempre en píxeles:
font-size: 16px, un margen de8px. - Para tener referencias: el texto normal de una web mide 16 px; un móvil pequeño tiene 360 px de ancho; un portátil, unos 1400.
Un matiz: los móviles modernos tienen muchos más puntos reales de los que "dicen" tener. La web trabaja con unos píxeles de referencia, iguales para todos, para que 16 px se vean de un tamaño parecido en cualquier aparato. A ti te basta con los de referencia.
Para qué sirve / cuándo aparece
- Es el vocabulario para pedir cambios con precisión: "sube el título 8 px" se puede cumplir; "un poquito más arriba", no.
- Y para escribir criterios comprobables: "a 360 px de ancho…" → responsive.
- En la Fase 3 aparecen otras unidades (
rem,%), que son formas de decir tamaños relativos a otra cosa.
Compruébalo tú
DevTools → modo dispositivo (Ctrl + Shift + M). Arriba ves el ancho y el alto de la pantalla simulada, en píxeles. Arrastra el borde y mira cómo cambia la página.
¿Cuál de estas peticiones a la IA es más fácil de cumplir y de comprobar?
Ver también
CSS · responsive · DevTools