Solucionado
O zoom da minha tela está em 100% e o título está muito grande, só fica bom quando coloco em 80%. Deixo em 80% para visualizar melhor? É por causa do meu computador? Alguma configuração talvez (ele é novo, comprei há 1 semana)? No caso se eu tivesse criando um site, como garantir que ele apareça direito em qualquer tipo de computador?
Zoom em 100%
Zoom em 80%
Oi, Daniela!
É comum que sites e plataformas reajam de formas diferentes dependendo da resolução da tela e configurações de escala do sistema. Mesmo com o zoom em 100%, o tamanho dos elementos pode parecer maior ou menor conforme o dispositivo. Como seu computador é novo, pode ser que ele esteja com uma escala de exibição maior (como 125% ou 150%), o que deixa tudo "maior" mesmo com o zoom padrão do navegador. Você pode verificar isso nas configurações de Tela > Escala e layout (no Windows, por exemplo).
Sobre sua dúvida em relação à criação de sites: para garantir que eles fiquem bons em diferentes dispositivos, usamos o chamado design responsivo. Isso envolve o uso de técnicas como media queries, unidades relativas (como %, em, rem) e flexbox/grid, que adaptam o layout conforme o tamanho da tela.
Então sim, você pode usar 80% se isso te ajuda a visualizar melhor! Mas o problema não está no curso em si é mais uma questão de configuração do seu computador.
Se a resposta te ajudar, marque como solucionada.
Olá, Daniela! Como vai?
Isso está acontecendo devido à largura da tela do seu computador, que está menor do que a largura da tela do computador usado no curso. Respondendo às suas perguntas:
1 Não é ideal que o desenvolvedor crie ou visualize um site em 80%, sempre em 100%, para garantir que o resultado seja o mais fiel possível àquilo que os outros usuários irão visualizar.
2 Você chegou a alterar o arquivo style.css do curso aumentado o tamanho das tags h1 e p? Se não, como havia citado, essa divergência é devida à diferença da largura total da tela do seu computador sim.
3 No Windows, você pode configurar as dimensões da tela. Confira se a sua resolução está como a resolução recomendada seguindo esse passo a passo:
4 Por fim, existem algumas maneiras de resolver esse problema e garantir maior compatibilidade (responsividade) em outros dispositivos. Uma dessas maneiras é aplicando as media queries no CSS. No arquivo style.css adicione esse seguinte trecho de código:
@media screen and (max-width: 1600px) {
h1 {
font-size: 50px;
}
.texto__paragrafo {
font-size: 24px;
}
}
Esse trecho vai alterar o tamanho de h1 e o tamanho de .texto__paragrafo a partir do momento que a largura da tela seja menor ou igual a 1600px.
Você pode aumentar ainda mais esse parâmetro, para 1700px, por exemplo. Dessa maneira, esse trecho de código será aplicado a partir do momento que a largura da tela seja menor ou igual a 1700px.
Espero ter ajudado e fico à disposição se precisar.
Abraço e bons estudos!
O problema era a escala de exibição mesmo que estava em 150%. Mudei para 100% e ficou muito pequeno, mas 125% ficou perfeito!! Obrigada pela ajuda Thayane e Daniel :)