PX e porcentagem

Heli, a porcentagem é usada como forma de medida PROPORCIONAL, já o pixel é FIXA. É uma grande vantagem utilizar porcentagem ao invés dos pixels levando em consideração a responsividade, por exemplo.

Suponha que você possui uma div com largura de 400px, na tela de um smartphone sua div ocupará praticamente toda a largura da tela, já na tela desktop ela ocupara menos da metade da tela, ou seja, a medida em pixels é uma medida que não se altera, independente da resolução de tela.

Já se você definir a largura da sua div como 40%, ela ocupará exatamente 40% do espaço da tela, seja uma tela de smartphone ou desktop. O CSS fará o cálculo percentual a partir do tamanho da tela que está sendo exibido seu layout.

Há muitos anos atrás, definiu-se que o tamanho padrão para criação de layout para sites seria 960 pixels. Isso levando em conta que a maior parte dos monitores tinham resolução de 1024x768. Mas isso tem mudado pois o maior acesso a sites hoje em dia são feitos por celulares. Em 2017 a tela de 360×640 era a mais usada.