Pixel CSS

O Pixel CSS - denotado no CSS pelo sufixo px - é uma unidade de comprimento que corresponde aproximadamente a largura ou altura de um ponto único que pode ser confortavelmente visto pelos olhos humanos sem esforço, mas é o menor possível. Por definição, esse é o tamanho físico de um único píxel em uma densidade de 96 DPI, situado a um braço de distância dos olhos do observador.

Essa definição, é claro, se demonstra ser muito vaga, e termos como "confortavelmente visto" e "braço de distância" são imprecisas, variando de pessoa para pessoa. Por exemplo, quando um usuário se senta em sua mesa, defronte a sua área de trabalho, o monitor geralmente estará longe dos seus olhos enquanto ele estiver usando o celular.

Assim sendo, geralmente basta dizer que quando a unidade de px é usada, o objetivo é tentar manter a distancia de 96px equivalentes a 1 polegada na tela, independentemente da densidade da tela. Em outras palavras, se o usuário está em celular com uma densidade de pixel de 266 DPI, e há um elemento colocado na tela com uma largura de 96px, então este elemento ocupará uma largura de 266px nos pixels do dispositivo.