✅ Como criar um layout responsivo

Índice

Requisitos
As propriedades minwidth e maxwidth
Usando o Preenchimento Relativo

UMA layout responsivo tornou-se a norma em web design, este tipo de layout de página significa que se a janela que o contém mudar de tamanho abruptamente, ou seja, de muito grande para muito pequena e vice-versa, nossos elementos devem ser capazes de se reorganizar para manter um experiência de usuário decente e funcional.

Isso sempre esteve disponível com as regras de CSSPorém, na última implementação do mesmo, melhores medidas foram tomadas, em parte devido à já existência do mundo móvel moderno, que é um dos grandes consumidores de design responsivo.

Embora existam vários frameworks, como Bootstrap ou Fundação que nos dão um layout responsivo por padrão, nem sempre podemos depender deles, por isso é muito útil saber como podemos construir um layout com essas características por conta própria.

Requisitos

1- Para concluir este tutorial, precisaremos ter conhecimentos básicos de HTML Y CSS, uma vez que são vitais para entender os exemplos feitos no tutorial.

2- No lado técnico, exigimos pelo menos um navegador moderno como Google Chrome, um editor de texto para escrever nosso código, podemos usar Texto Sublime o Bloco de notas ++ ou mesmo o bloco de notas do Windows ou Gedit no Linux se nos sentirmos aventureiros.

3- Finalmente, precisamos de uma conexão com a Internet para baixar uma ou duas imagens se quisermos colocá-la em nosso código, como veremos em um dos exemplos mostrados.

As propriedades minwidth e maxwidth

Este é talvez o primeiro aspecto que encontramos ao trabalhar com ambientes responsivo, já que muitas vezes nos concentramos em quando a página fica menor, mas e as novas telas de 4K? É por isso que não devemos negligenciar a resolução máxima sob a qual nosso site parece decente.

minwidth e maxwidthAs propriedades ou atributos largura mínima Y largura máxima Os CSS ajudam-nos a combater este problema, pois permitem-nos estabelecer as margens máximas sob as quais queremos que o nosso design fique. responsivo, pois do contrário, os extremos nos tamanhos podem pregar uma peça em nós, principalmente nestes momentos em que as resoluções continuam a aumentar, mas ainda não se tornam massivas.

No exemplo a seguir, vamos demonstrar como podemos regular nossa layout graças às propriedades mencionadas, para isso vamos criar um documento HTML com o seguinte conteúdo:

Exemplo 1 de layout responsivo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et tempor arcu, sempre elementum nunc. Mauris at sem ut just convallis maximus et vitae orci. Nulla ultrices porttitor erat non sodales. Phasellus varius ipsum non ligula aliquet ultricies in quis pain. Aliquam ac nisl Vehicula.

O que fizemos foi criar três elementos div que funcionam como uma espécie de colunas, então dizemos ao seu elemento contêiner neste caso artigo que sua largura máxima será 1200 pxEntão, não importa o tamanho da tela, o design nunca vai crescer mais a partir daí, então criamos três classes, uma para cada div e uma atribuímos uma largura mínima desta forma, não importa o quanto a tela seja reduzida, sempre vai. para manter esse mínimo de proporções, isso é excelente para imagens como veremos na captura de tela do exemplo, e finalmente para a classe flutuador também atribuímos uma largura mínima a ele. Vamos ver como nosso exemplo fica no navegador quando temos uma resolução grande:

PROLONGAR

Agora vamos ver como ele é dimensionado quando reduzimos um pouco a janela do navegador:

PROLONGAR

Por fim, vamos ver o resultado quando fazemos a janela ter um tamanho semelhante ao de um celular:

Pudemos ver como se mantiveram as proporções estabelecidas em mínimo e máximo, mas o mais importante é que nosso desenho foi adaptado às diferentes resoluções com que o visualizamos, e desta forma conseguimos garantir que o usuário não perdesse usabilidade em sua experiência com nosso site.

Claro, isso está longe de ser algo a ser mostrado na produção, mas nos dá uma ideia de onde devemos concentrar alguns dos esforços quando estamos trabalhando em designs reais para nossos aplicativos e páginas, o interessante é que as colunas foram ajustadas para que pudéssemos ver como passamos de um layout de 3 colunas para um layout de coluna única.

Usando o Preenchimento Relativo

O preenchimento É uma medida que nos permite manter um espaço do conteúdo contra as bordas do container para que estabeleçamos um limite de quão longe ele irá, não deve ser confundido com a margem por ser outro conceito.

A questão é que o preenchimento quase nunca é levado em consideração ao fazer um layout que seja responsivo resultando em textos e conteúdos que mais tarde permanecem não estéticos ao mudar a resolução com a qual o design é visualizado.

No código a seguir, o que faremos é colocar um preenchimento que funciona relativamente, ou seja, conforme o tamanho da janela é ajustado, nosso preenchimento Mudará para manter as proporções e desta forma fazendo com que o conteúdo permaneça sempre como o colocamos apesar de ter menos espaço devido à mudança na resolução. Vamos ver nosso exemplo de código:

Preenchimento RelativoMantenha as proporções com um preenchimento relativo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et tempor arcu, sempre elementum nunc. Mauris at sem ut just convallis maximus et vitae orci. Nulla ultrices porttitor erat non sodales.

Como vemos, definimos as propriedades preenchimento de cada classe com valores percentuais em vez de valores fixos com medidas em pixels, desta forma o interpretador de estilo do navegador dará uma medida que vai de acordo com o valor que colocamos, no final quando vermos nosso exemplo no navegador, temos o seguinte:

PROLONGAR

Agora, se reduzirmos o tamanho da janela, veremos como um ajuste é feito, mas mantendo uma distância proporcional do texto às bordas:

Em seguida, percebemos como nosso design é mantido e evita deformações, reduzindo a resolução da pessoa que o contém, mantendo assim uma experiência consistente para nosso usuário.

Embora existam conceitos mais avançados que iremos abordar em outros tutoriais, com esses truques ou dicas podemos dar uma nova vida aos nossos sites antigos, e muito mais agora do que os motores de busca como Google Pedem-nos uma versão mobile para poder dar-nos preferências nos resultados. O mais importante para alcançar bons resultados é experimentar e continuar a praticar muito para que essas soluções saiam naturalmente da nossa mente e não tenhamos de recorrer a guias em todos os momentos.

Com isso encerramos este tutorial, pois vemos que não precisamos de nenhum framework para obter resultados. responsivo, e também não precisamos deixar a combinação HTML + CSSA única coisa é que se tivermos que construir nossas próprias ferramentas, no entanto, a satisfação de melhorar nosso design é uma grande recompensa.