Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Pessoal, boa noite.
Estou estudando 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?
Cara comecei usar recentemente o Materialize para os meus projetos.. ele é totalmente responsivo e você nem sofre para implantar.. da uma olhada no site https://materializecss.com/
Olá!
Veja bem... 1000 pixels são 1000 pixels, seja em 72 ou 300 DPI, por ex.
A única diferença é que em 72 DPI (geralmente utilizados para conteúdos digitais, como um site) você vai visualizar o site em uma proporção maior (tudo fica maior, junto).
O que você precisa se preocupar é especificamente com o tamanho da "tela útil" do navegador (ou viewport) do usuário, em pixels.
Por exemplo: eu posso ter uma tela gigante, mas se eu redimensionar meu navegador de forma que ele tenha 500px de largura, ele deverá se comportar como se estivesse exibindo o conteúdo para um smartphone.
E como isso é feito? Geralmente com media queries. Veja:
https://developer.mozilla.org/pt-BR/docs/Web/Guide/CSS/CSS_Media_queries
https://tableless.com.br/introducao-sobre-media-queries/