0

Confesso que webdesign não é meu forte, por preciso tirar algumas dúvidas cruciais em relação a sites responsivos. Entendo que para definir formatações para diversos dispositivos usa-se o Media Queries. Por ex.:

Criei essa media para testes:

@media (max-width: 768px) {
    body tr td{
        font-size: 20px;
    }
}

No Motorola G4 Plus (aquele com ghost touch), aparece perfeito. Ele tem 5.5'' polegadas, porém em um outro smartphone com a tela 4.5'' a fonte sobrepôs a coluna.

Minhas dúvidas são:

  • Como faço para que o site seja visível de forma satisfatória em todos os devices baseados em suas dimensões, ou seja, qual Media Query uso para cada dimensão dos devices. Ex.: 4.5'' (@media...), 5.5'' (@media...), etc?
  • Existe um padrão de media-queries baseados nas dimensões das telas dos devices?

1 Resposta 1

1

Se você quiser servir TODOS os devices seu código vai virar uma loucura e vai ser de impossível manutenção, já que a todo momento pipoca um device novo e que pode ter dimensões novas.

Recomendo que você trabalhe com o combo media queries + responsive. Assim você consegue pegar os devices mais usados do mercado e ainda ser bem visualizado em muitos outros.

Uma boa técnica pra isso é o mobile first: você pensa no seu site primeiro em celular e depois vai readequando os elementos para tamanhos de tela maiores. Assim, você evita ter elementos que se sobreponham. Se encaixou no menor, vai ser mais fácil encaixar no maior.

Não adianta passar uma lista com os tamanhos mais usados porque isso vai variar com o tempo. Isso faria qualquer resposta passar a receber downvote com o tempo, já que ficaria obsoleta.

7
  • Olá Bruno. Perdoe-me a ignorância, mas o que seria combo media queries + responsive?
    – user24136
    Commented 31/08/2017 às 21:04
  • 1
    Responsividade é a técnica de construir um site fluído, com elementos que se adaptam de acordo com o tamanho (geralmente com elementos dimensionados usando %). Commented 31/08/2017 às 21:09
  • 1
    Tem um artigo bem interessante sobre como usar os media queries aqui: tableless.com.br/introducao-sobre-media-queries Commented 1/09/2017 às 19:39
  • 1
    Veja o problema: sua resposta está correta APENAS se o celular estiver na vertical. Se o usuário gira-lo 90º, a lógica passa a ser outra. Entende? Commented 1/09/2017 às 19:40
  • 1
    @Fox.11 Se minha resposta ajudou você, favor aceitar como correta. =) Commented 1/09/2017 às 19:41

Você deve fazer log-in para responder a esta pergunta.