sábado, 21 de janeiro de 2017

Como criar um design recetivo para WebSites

 Um WebDesign recetivo (ou "responsive" em inglês) é, ao fim e ao cabo, um design que permite a adaptação da nossa página web consoante o tamanho do ecrã utilizado para a visualizar. Isto é, um design recetivo deve, tendo em consideração o tamanho do ecrã utilizado, adaptar o conteúdo em questão ao tamanho do display, permitindo que a experiência num ecrã do smartphone seja tão boa como num monitor, havendo poucas distorções de texto.


Desta forma, em vez de usarmos valores em pixeis de largura (em CSS), altura e margem para elementos, devemos procurar antes atribuir valores em percentagem aos mesmos elementos para que estes ocupem, ao invés de uma quantidade de pixeis pré-definida, apenas uma percentagem estabelecida de todos os pixeis disponíveis pelo dispositivo que estamos a usar.
 Para além disso, podemos atribuir diferentes valores percentuais dependendo dos pixeis disponibilizados pelo nosso dispositivo através da seguinte tag (em CSS): @media screen and (max-width: Zpx) - sendo Z o número de pixeis máximos pré-definidos.
 Para os mais interessados segue aqui um tutorial em vídeo bastante detalhado que explica todas as vertentes de um site com um design recetivo:



Sem comentários:

Enviar um comentário