O layout de um documento HTML pode ser definido com pixels, porcentagens ou ambos. Pixels são pedaços de informação descrevendo a cor e localização de cada pedaço que compõe a página. Tamanhos em pixels definem um tamanho de imagem que permanece o mesmo, não importa o tamanho do monitor. Porcentagens ajustam dependendo do tamanho do monitor. Se uma página web é construída para ocupar 80% da tela, a imagem ocupará 80% de qualquer tela, independentemente do tamanho. Geralmente, uma combinação de pixels e porcentagens é usada ao configurar uma página HTML.
Pixels para porcentagem: Transforme o pixel em fração para converter para porcentagem. Pense em um pixel como fração sobre denominador 16. Se tem 12 pixels, pense como 12/16 pixels.
Multiplique o numerador da fração por 100 e divida por 16 para converter pixels em frações. Se tem 12/16 pixels, 12 x 100 = 1200/16 = 75 porcento.
Porcentagem para pixels: Transforme a porcentagem em fração. Cinquenta porcento é 50/100, por exemplo.
Multiplique o numerador da porcentagem por 16 e divida por 100 para transformar porcentagem em pixels. Se tem 50/100 e quer transformar em pixels, 50 x 16 = 800/100 = 8 pixels.
rem, em, vw/vh para design responsivo.