Quando e qual a verdadeira diferença entre px e %?

Fala Gabriel, beleza?

Essa sua dúvida é bastante interessante. Mais pra frente provavelmente você vai ver design responsivo, onde as páginas web que você está criando vão se adaptar pra telas de diversos dispositivos. Quando você define uma porcentagem, é exatamente isso que você disse: vamos ter ocupado tal porcentagem do documento. É relativo. Já quando você define em pixels, você tem um valor absoluto. Encare pixels como uma unidade de medida, assim como metro, km, etc.

A grande sacada é que, na tela do seu computador, um elemento de 50 pixels pode ficar perfeito, mas isso não garante que ele fique da mesma forma no seu celular, que tem a tela muito menor, por exemplo.

Tudo certo José! Então bora lá... Quer dizer então que 15px e 15% na minha tela com resolução 1366 x 768 ela vai aparecer da mesma forma. Não haveria diferença entre usar o px e o %? Mas quando eu estou com uma resolução bem menor o meu 15% iria representar 15 porcento da tela, enquanto o 15px iria se manter pra qualquer uma?

Não... Vou fazer uma comparação bem literal, mas que talvez você consiga entender melhor:

Considere os px como se fossem centímetros, e que a sua tela tenha uma resolução de 1000cm por 800cm.

Agora considere que você deseja ajustar um elemento para que ele possua a propriedade width (1): 15px e width (2): 15%.

Transformando para o nosso sistema de medida imaginário acima, teríamos: width (1): 15 centímetros e width (2): 150 centímetros (15% de 1000 centímetros);

Se você considerasse um celular de resolução 500cm por 300cm, por exemplo, você continuaria com width (1): 15 centímetros mas o seu width (2) seria: 75cm (15% de 500cm).

Em resumo, pixel é absoluto e porcentagem (%) é relativo.

Cara... sensacional. Entendi perfeitamente! Muito obg. ABS.