Executando verificação de segurança...
1

[AJUDA] Responsivo do notebook para o PC

Estou programando um site em conjunto com minha equipe do curso técnico de informática e me esbarrei em uma questão que está nos complicando em nosso projeto.

Estou trabalhando nos laborátorios de informática e em casa, onde eu utilizo meu notebook. No entanto, o site, claro, por causa de diferentes tamanhos de telas, fica com os elementos enormes na tela menor (notebook), já que o site foi projetado inicialmente nessas telas maiores.

Estamos com os elementos responsivos (não 100%), no entanto, eles não possuem grande efeito em telas que não são tão diferentes de tamanho.

Eu gostaria de resolver isso, que é o site ficar com elementos de um tamanho adequado para diferentes tipos de telas, principalmente para telas menores como notebook não ficar com os elementos gigantes.

Isso pode ser pelos elementos não estarem responsivos adequadamente, ou outra coisa? Minhas "soluções", por exemplo, foi criar uma medida que fique bons em ambos (tela maior e menor), mas não ficou muito legal, ficava dando problemas, como elementos muito pequenos para telas maiores, eu não achava um equilibrio.

O media screen poderia ser uma solução? Isto não cheguei a testar, mas prefiro ouvir vocês para me ajudar.

Carregando publicação patrocinada...
2

Media Queries são ótimos para definir estilos diferentes com base no tamanho da tela.

Também recomendo a utilização de medidas relativas como 'rem' ou '%' para que o elemento se ajuste com base no tamanho da tela.

1

Isso pode ser pelos elementos não estarem responsivos adequadamente

Talvez esse seja o principal motivo, normalmente o tamanhos dos elementos não mudam, se um elemento está muito grande em uma tela, pode ser sinal de alguma configuração do CSS, tamanhos de largura e altura definidos, por exemplo:

button {
  width: 200px;
  height: 100px;
}

Outros fatores, tamanho de fonte muito grande, margin e padding muito grandes, layout com muitos elementos em uma mesma linha, etc...

1

Minha equipe utilizou porcentagem para a maioria dos elementos e rem para para as letras, na hora de testar responsivo, diminuindo ou aumentando bastante a tela eles se comportam/enquadram bem, mas na hora de tamanhos de telas não muito diferentes que dá problema