Responsivo - Resolução x Tamanho da tela


(Gilberto) #1

Pessoal, trabalhei com criação de site quando ainda era predominantemente acessado por computadores, estou retomando e me inteirando sobre design responsivo e veio uma grande duvida:

Temos TVs, (24 polegadas ou mais), notebooks (mais comumente 14 ou 15 polegadas), tablets (dentre varias telas temos 8 ej 10 polegadas) e celulares (geralmente 4,alguma coisa ou 5,alguma coisa em polegadas)

Todos podem ter resoluções Full HD por exemplo mas com tamanho de telas muito diferentes (densidade de pixels por polegada diferetes)

Então como um site que eu crio identifica o tamanho de tela e garante que fontes, imagens e botões fiquem acessíveis em todos os devices?

Creio que identificar a resolução de tela não seja o suficiente, como fazer então?


(Luan Maik) #2

É possível identificar através das Media Queries do CSS.


(Gilberto) #3

Minha dúvida é exatamente esta, o meduaquery detecta resolução mas como exitem tamanhos de tela diferentes para a mesma resolução (Full HD pode ser um pequeno celular ou uma TV de mais de 40 polegadas) , um elemento que ocupe 10% da largura pode ficar pequeno demais no celular.

Como resolver isto?


(Luan Maik) #4

Media query não funciona da forma que está pensando, o iphone X tem 375px de largura, ou seja, não tem relação com a resolução e sim com a largura da tela.
Faça um teste e verá que vai funcionar.