É uma forma de desenvolver o Layout para que o site seja acessível em varias resoluções como, por exemplo celulares e tablet.
Passo a passo: criar um layout responsivo de uma página para três tamanhos de telas diferentes.
1- Passo : Crie uma estrutura HTML
Nesse exemplo vou estar criando uma página em HTML básica com uso de um formulário como mostra na imagem.
2- Passo: Criar a regra CSSpara as 3 resoluções:
Uma boa forma de trabalhar com um layout responsivo no começo é separando em 3 folhas de estilo cada um com uma resolução no caso mobile, tablet e desktop, como o exemplo abaixo:
Como se trata de um exemplo eu coloquei o nome de cada plataforma no arquivo CSS para ficar mais fácil de entender, perceba que dentro do atributo media está sendo especificado o tamanho de cada resolução assim que ultrapassar o limite a regra CSS muda.
Na imagem abaixo mostra o código da pagina HTML com a regra CSS para mobile.
Na imagem abaixo mostra a pagina HTML com a regra CSS para mobile.
Na imagem abaixo mostra o código da pagina HTML com a regra CSS para tablet.
Na imagem abaixo mostra a pagina HTML com a regra CSS para tablet.
Na imagem abaixo mostra a pagina HTML com a regra CSS para desktop.
Perceba que em cada resolução, conforme a pagina é aumentada a cor, tamanho da foto e seu estilo muda.
Nenhum comentário:
Postar um comentário