Skip to main content
adicionou 110 caracteres ao conteúdo
Fonte Link
user24136
user24136

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?

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?
  • Existe um padrão de media-queries?

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?
Fonte Link
user24136
user24136

Como usar Media Queries para sites responsivos baseados nas dimensões dos devices?

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?
  • Existe um padrão de media-queries?