Regla de píxeles

¿Qué es un píxel CSS?

Un píxel CSS es la unidad abstracta del navegador: el px de tu hoja de estilos. Deliberadamente no es un tamaño físico: en una pantalla estándar, un píxel CSS se asigna a un píxel físico, mientras que en una pantalla de alta densidad («Retina») varios píxeles físicos se unen para dibujar un solo píxel CSS con más nitidez. La relación es la relación de píxeles del dispositivo (DPR). El diseño web ocurre en píxeles CSS, que es exactamente lo que cuenta esta regla.

Cómo leer la escala de px

En el modo px, las marcas pequeñas vienen cada 10 px, las marcas medianas cada 50 px y las marcas numeradas cada 100 px. Para medir un botón: alinea su borde izquierdo con cero y lee dónde cae el borde derecho; digamos, justo después del 120, es decir, unos 124 px de ancho. Para trabajo exacto, coloca guías en ambos bordes y resta sus lecturas.

Por qué el modo px no necesita calibración

La calibración responde una pregunta física: «¿cuántos píxeles CSS forman una pulgada real en esta pantalla?». El modo de píxeles nunca hace esa pregunta: simplemente cuenta las unidades propias del navegador, que la página conoce exactamente. Esa es también la razón por la que las mediciones en px carecen de sentido como tamaños físicos: 100 px son un número distinto de milímetros en cada pantalla. Usa px para diseño, y cm/mm/pulgadas (después de la calibración) para el mundo físico.

Píxeles frente a puntos de impresión

A veces verás «1 px = 1/96 de pulgada». Esa es una convención de impresión de CSS, usada para que las hojas de estilos puedan convertir a unidades físicas en papel: no dice nada sobre tu pantalla. En pantalla, la única afirmación honesta es: un píxel CSS es tan grande como la densidad de la pantalla lo haga, y la regla calibrada es cómo lo descubres.

Referencias útiles en píxeles

• Altura de las mayúsculas del texto del cuerpo típico (16 px): aproximadamente 11 px
• Altura común de un botón: 36–48 px
• Favicon: 16 × 16 px
• Ancho de viewport Full HD: 1920 px (px CSS, sin importar el DPR)

Preguntas frecuentes

¿Qué tamaño tiene un píxel en la vida real?

No hay una respuesta fija. Un píxel CSS no tiene tamaño físico: es 1/96 de pulgada solo por convención para impresión. En tu pantalla, su tamaño físico depende de la densidad de la pantalla, que es exactamente por lo que la regla necesita calibración para las unidades físicas pero no para el modo de píxeles.

¿La regla de píxeles necesita calibración?

No. El modo de píxeles cuenta los píxeles CSS del propio navegador, que la página conoce exactamente sin ninguna medición física. La calibración solo importa para cm, mm y pulgadas: las unidades con tamaños reales.

¿Qué es la relación de píxeles del dispositivo (DPR)?

El número de píxeles físicos de la pantalla que se usan para dibujar un píxel CSS. Un DPR de 2 (una pantalla Retina) concentra cuatro píxeles físicos en cada píxel CSS para un renderizado más nítido. El modo de píxeles de la regla siempre muestra píxeles CSS, que es en lo que trabajan los diseñadores web.