Solucionado
Boa tarde!
Não estou conseguindo entender o motivo de alguns lugares estar sendo usado px, em e outros rem.
Por exemplo (tendo base no arquivo baixado nesse módulo):
Por que o padding do ".titulo-principal" está em pixels mas o do ".corpo-principal" está em "rem" e o do ".navegacao-site" está em "em".
Estou com dificuldade em entender quando utilizar cada elemento.
Oi André,
Dá uma olhada nas respostas do Sérgio nesse tópico aqui:
https://cursos.alura.com.br/forum/topico-quando-usar-as-medidas-px-em-rem-ch-21750
Acho que vai te ajudar bastante!
Se ainda tiver dúvida só perguntar, tudo bem?
Espero ter ajudado,
Abcs!
Ajudou a esclarecer sim, Natan!
Porém ainda a duvida ficou quanto ao exemplo que dei. Para o padding, foi usado 'px', 'em' e 'rem'.
Sendo do ".titulo-principal" em "px", do "corpo-principal" em "rem" e do "navegacao-site" em "em".
Obrigado, Natan!
Vamos dar uma passadinha pelo em primeiro?
Muitas vezes queremos encarar os elementos da página como componentes. Por exemplo, você pode ter um painel que tem título e outras coisas que fazem sentido em todo painel. Daí, uma boa pedida é quando aumentamos o tamanho da fonte do painel, queremos que seus filhos aumentem proporcionalmente. Dessa maneira, qualquer modificação no tamanho da fonte do elemento pai terá impacto nos seus elementos filhos. Isso porque o em adota como valor o tamanho da fonte do elemento pai.
Já o rem, bem, este é parecido com o rem, mas o elemento filho toma como referência a fonte padrão da página, por exemplo, o tamanho da fonte da tag HTML (normalmente 16px nos navegadores). A vantagem desse é que qualquer elemento da página terá o mesmo referencial, facilitando assim prever o resultado quando aumentamos o tamanho da fonte da tag HTML. Contudo, ele não é tão elegante quando o rem, pois não permite ter uma proporção baseada no container, no elemento pai.
Já pixel, pode ser usado sem problema, mas nunca com valores gitantes. Por exemplo, não há nada de errado usar 200px, ou até mesmo 20px. Não há telas menores (ainda) do que 320px (view port). Contudo, se você quer realmente medidas relativas, pode considerar usar %.
Sobre os valores que o você citou do seu projeto: varia de programador para programador como ele vai combinar essas medidas. Contudo, nada o impede de querer flexibilizar ainda mais o layout usando medidas relativas e não absolutas.
Resumindo: design responsivo é uma palavra guarda-chuva que leva em consideração uso de media query, medidas relativas (em, rem, %, etc), imagens responsivas e outras técnicas.
Espero tê-lo ajudado com essa explicação informal.
Ajudou muito, Flavio!
Muito obrigado!