Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Qual o problema que existe com o Google Chrome?

Lá vem uma história um pouco longa: Quando acabei esse curso e vi o vídeo em que recomendava fazer alguns projetos sozinho, decidi voltar a trabalhar no meu currículo que estava fazendo. Como já relatei em outra discussão, uso muito o navegador Brave, e normalmente uso ele pra fazer os testes se tá tudo certo na página que estou fazendo. Pois bem, assim como na outra circunstância, me deparei com um problema. Depois que já estava tudo pronto, decidi fazer os testes em outros navegadores e me deparei com o seguinte problema: O Chrome é muito "pequeno". O que eu quero dizer, é que eu sempre preciso ficar diminuindo os elementos muito em comparação com outros navegadores (Brave e Edge) para que as coisas fiquem da maneira como foi planejada nele (Normalmente são elementos que eram pra ficar na mesma linha, mas pelo tamanho um deles acaba na linha de baixo. Eu não sei se o problema está comigo, ou com o software (provavelmente seja a primeira opção). Mas eu gostaria de entender, porque eu sinto essa dificuldade no Chrome, que em outros navegadores não parece acontecer.

3 respostas

Seu problema é um tanto estranho Fernando. Pressione "Ctrl + 0" para se certificar que seu Chrome não está com Zoom. Fora isso seu layout deveria ser responsivo, pesquise sobre cursos de html responsivo aqui na Alura, caso não saiba o que é responsivo uma reposta simplista é: O tamanho da sua tela não deveria influenciar negativamente no seu layout. Ele não deveria quebrar e isso tem haver com a maneira que faz o código. E pense bem nisso sobre o seu currículo, pois mesmo que no Chrome fique igualzinho, e se a pessoa está utilizando uma resolução menor que a sua, alguém que vai te contratar não deveria ver o layout quebrado. Ao desenvolvermos sites testamos resoluções de tela também e fazemos isso durante o processo de desenvolvimento. Inclusive existe uma extensão para Webkit (motor que roda por trás tanto do Chrome como Brave e até do Edge) chamada Windows Resizer https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh?hl=pt-BR

Oi, depois de muito quebrar a cabeça ontem, eu consegui não deixar ele quebrado. Não sei se é a melhor solução, mas ter passado a usar a medida "rem" ao invés de "em" consertou.

solução!

Não sei se sabe sobre a diferença de usar rem e em, mas numa explicação rápida:

rem é baseada no tamanho padrão do navegador que é 16px caso não seja alterada no navegador ou via css através do seletor :root { font-size: 24px }.

  • 1rem = 16px (tamanho padrao do navegador se não alterar)
  • 2rem = 32px

Já no caso do em as coisas complicam um pouco. Pois é baseado no tamanho da fonte do elemento pai que tiver a propriedade font-size setada. Se o elemento pai tiver 16px, 1em será este tamanho, mas se for outro, será esse outro tamanho. Onde as coisas se complicam é quando temos outros elementos que são filhos, mas usarei uma unidade de medida simples para ficar fácil: Imagine que eu setei no meu a seguinte declaração:

body {
    font-size: 10px;
}

Assim no elemento onde eu setar font-size: 1em, o font-size será de 10px. Mas caso eu tenha um elemento que eu setei em pixel no elemento pai uma fonte de 20px e no filho eu dizer que a fonte é de 1em. Não terei uma fonte de 10px como antes, e sim de 20px, pois é o tamanho da fonte do elemento pai. No fundo parece complicado de mais, mas é simples se for consistente no uso de em.

Leia mais sobre: https://tableless.com.br/unidade-pixels-em-rem/

No seu caso pode ser que esse efeito aconteceu e quando mudou para rem teve uma resposta consistente, pois rem sempre será a partir do root e não depende de outras propriedades font-size, o que pode gerar um valor diferente do esperado. Se entendeu e conseguiu resolver, marque o tópico como resolvido para que vejam que já está tudo certo com seu tópico.