Pixel físico e CSS pixel
O que são e quais são suas diferenças?
Fala, galera! Mais um post da série <dividindo o conhecimento> 🙌 🙌
Antes de iniciar o post é necessário deixar claro que tudo o que será escrito nas linhas abaixo será um relato pessoal de forma simples e coerente a minha atual experiência e conhecimento, portanto deverá ter uma linguagem de fácil acesso e conteúdo esquematizado e “mastigado”. Vamos lá!
O assunto de hoje é pixel, em especial pixel físico e CSS pixel. Vamos conhece-los e aprender as suas diferenças. Afinal nem todo pixel é pixel. Vamos lá descobrir o porquê?
Imagine que você está desenvolvendo um site e o designer foi legal e já entregou todos os layouts para você, incluindo os responsivos. Tudo certinho com medidas, descrições, cores e etc (Maravilha! 🙌 ). Agora cabe a você transformar esse layout em um site legal. Certo, então você começa a codificar até que um detalhe te deixa pensativo(a)… dentro dos requisitos os botões do site devem ter uma altura de 44 pixels. Daí você fica pensando que para a exibição de um monitor grande/médio esse tamanho de botão é ótimo mas e para os dispositivos móveis? 44 pixels de altura para um celular que tem a tela pequena será que funciona? E agora como faz? 💭 💭
É comum nós associarmos pixel com resolução de tela, afinal resolução é a medição que indica quantos pixels existem em cada linha e em cada coluna de uma tela. Então, parando pra analisar quanto maior a resolução, maior a qualidade. Da mesma forma que quanto maior a tela mais pixels cabem nela, correto? Será mesmo? Veja o exemplo abaixo:
No exemplo estamos comparando dois tamanhos de telas diferentes, um iPhone 6 com 4,7 polegadas e um monitor com 20 polegadas. Porém é possível perceber que a quantidade de pixels na tela do iPhone é quase igual a da tela do monitor (que chegar a ser quase 5 vezes maior do que o iPhone), como pode isso? Uma tela tão maior do que a do iPhone ter apenas essa quantidade de pixels…deveria ser bem mais…concorda?
Isso ocorre devido a densidade de pixel, que refere-se a quantidade de pixel em um espaço físico (normalmente, uma polegada). É importante entender que um pixel não tem um tamanho definido, ele depende da densidade da tela em questão. Para se calcular a densidade de pixel se faz um calculo levando em consideração o seguinte detalhe: a quantidade de pixels existente em cada polegada da tela (onde a sua unidade de medida é o ppi (pixels per inch ou pixel por polegada). A densidade de pixels está totalmente atrelada ao tamanho da tela e a sua resolução, logo se uma tela for pequena maior é a sua resolução e terá um ppi alto, da mesma forma para telas grandes porém seu ppi é baixo.
Pixel no CSS e o viewport
O viewport é a parte visível do seu site. Com diferentes tamanhos de telas temos diferentes tamanhos de viewport. O viewport para dispositivos mobile nos proporciona visualizar o site da forma que foi planejado para o mobile e não uma versão desktop onde temos que dar um zoom para aproximar as coisas. E essa versão do desktop no mobile influencia no CSS pixel, você pode perceber que um pixel no viewport tem outro significado do pixel físico. Uma vez que na forma desktop visto por um mobile todo o conteúdo do site ficaria no seu tamanho normal, os textos ficariam pequenos para leitura o que causaria um desconforto.
Como existem uma diversidade de tamanhos de telas diferentes era necessário padronizar essas diferenças, daí criou-se um pixel de referencia, onde não necessariamente uma medida desse pixel corresponde a exatamente um pixel físico. Para resolver esse problema temos o CSS pixel.
Repare que ao construir sites e usarmos as medidas em pixel no CSS existe uma diferença pro pixel que nós associamos ao tamanho das telas(pixel físico). O que acontece é que o pixel no CSS não é de fato um pixel na tela. O pixel do CSS é o que chamamos de pixel de referencia, que geralmente é maior do que um pixel real. Logo um pixel físico não é o mesmo que um CSS pixel.
É como se o CSS pixel representasse o tamanho dos componentes e elementos numa página web e o pixel físico trata da menor unidade de tamanho da imagem, aquele pontinho pequeno na tela do seu hardware.
Chegou ao fim o post de hoje, algum dos conceitos passados foi totalmente novo pra mim, afinal quem diria que um pixel não é um pixel. Portanto é importante focar atento a esses tipos de conceitos que é essencial pra qualquer desenvolvedor front e/ou designer. 😉
Espero que o post te ajude nos estudos! Qualquer dúvida, feedback ou conversas use o espaço abaixo, todo feedback construtivo é super bem-vindo.
Valeu e até o próximo post! 👋
