In today’s world, there are a plethora of devices for people to choose from and it can be ought to try to accommodate and build for the best experiences on all devices. No entanto, é importante manter-se atualizado com os tamanhos de tela mais populares e resoluções ao projetar sites web e móveis. Um site que é otimizado e responsivo faz com que um fluxo de usuário mais fácil e, em última análise, uma experiência agradável para o seu público.,
tamanho, resolução e visualização do ecrã: o que significa tudo isto?
quando você compra um dispositivo, você muitas vezes vai ver tanto o tamanho da tela e resolução listados nas especificações. O tamanho do ecrã é a medida física diagonal da tela em polegadas. Isto não deve ser confundido com a resolução, que é o número de pixels na tela muitas vezes exibido como uma largura por altura (ou seja, 1024×768). Como os dispositivos com o mesmo tamanho de tela podem ter resoluções muito diferentes, os desenvolvedores usam viewports quando estão criando páginas amigáveis móveis., Viewports são versões reduzidas de resoluções que permitem que sites sejam vistos de forma mais consistente em diferentes dispositivos. Viewports são muitas vezes mais padronizados e menores que tamanhos de resolução.
enquanto monitores desktop e laptop estão em orientação paisagística (maior que a altura), muitos dispositivos móveis podem ser rodados para mostrar sites em ambas as orientações paisagem e retrato (mais alto que largo). Isso significa que designers e desenvolvedores devem projetar para essas diferenças.
precisa de Ajuda para determinar se o seu site é sensível? Use a nossa ferramenta livre MG, Controlador de design responsivo.,
enquanto monitores desktop e laptop estão em orientação paisagística (maior que a altura), muitos dispositivos móveis podem ser rodados para mostrar sites em ambas as orientações paisagem e retrato (mais alto que largo). Isso significa que designers e desenvolvedores devem projetar para essas diferenças.
estilo sensível
seria quase impossível para as empresas projetar para cada dispositivo individual. Em vez disso, ao programar projetos responsivos, os desenvolvedores frequentemente:
- agrupam o estilo nos tamanhos de dispositivos mais típicos para telefones, tablets e desktops., Neste caso, qualquer coisa maior que 7 polegadas é normalmente mostrado na resolução do ecrã ou-
- Use pontos de paragem (larguras de pixels definidas que o ecrã irá ajustar a disposição com base no tamanho do ecrã) dependendo do desenho e disposição
por vezes, um programador pode optar por combinar ambos os métodos se o considerarem necessário. Recomendamos começar agrupando os tamanhos típicos de dispositivos juntos.
Se você é um desenvolvedor e está procurando gerar os estilos necessários para lidar com o estilo móvel ou responsivo, abaixo incluímos um trecho de CSS que poderia ajudar.,d só pode ser usado como um guia para começar:
/* start of desktop styles */
@media screen and (max-width: 991px) {
/* início da grande tablet estilos */
}
@media screen and (max-width: 767px) {
/* início do tablet médio estilos */
}
@media screen and (max-width: 479px) {
/* início de telefone estilos */
}
Mais Popular Resoluções de Tela
o fato de Saber que ele é a chave para acomodar os diversos dispositivos que quando a concepção de websites, nós compilamos uma lista dos mais up-to-date dispositivos com seus respectivos tamanhos de pixel e viewports abaixo., Nós também colocamos esta informação em um PDF acessível para download.,560
Got anymore tips or suggestions on how to handle different screen sizes and resolutions?, Compartilhe conosco no Facebook!