Quais são as etapas para criar um design de site responsivo com HTML e CSS?

Este artigo demonstra as etapas para criar um design de site responsivo em HTML e CSS usando:

• Metatag da janela de visualização
• Imagens responsivas
• Layout da caixa flexível
• Esquema de Grade
• Consultas de mídia

Como criar um design de site responsivo com HTML e CSS?

A criação de um design de site responsivo com HTML e CSS envolve a construção de um layout que se adapta a diferentes tamanhos e resoluções de tela. Aqui estão as etapas que você pode seguir para criar um design de site responsivo:

Etapa 1: metatag da janela de visualização

O ' janela de exibição ” meta tag desempenha um papel vital na criação de web design responsivo. Está inserido dentro do “ ” do arquivo HTML contendo os seguintes atributos:

A meta tag acima tem dois atributos:

• O ' nome ” informa o nome da funcionalidade para a qual esta tag é criada/utilizada. Por exemplo, definir o “ janela de exibição ' para o ' nome ” para lidar com a viewport de diferentes dispositivos.
• O ' contente ” define o valor do atributo anterior. Ele define a largura de cada dispositivo e dimensiona o documento/página da Web para 100%.

Etapa 2: imagens responsivas

Como o tamanho da imagem varia entre si, portanto, é difícil definir o mesmo “ altura ' ou ' largura ” para cada imagem. Quando o tamanho da imagem é fixo, os usuários não redimensionam a imagem da página da Web com a tela. No entanto, os usuários podem definir a imagem responsiva por meio do seguinte código:

O ' largura máxima ” A propriedade CSS restringe a exibição da imagem dentro de seu espaço alocado. Definindo o valor em “%”, a imagem redimensiona junto com o redimensionamento de seu elemento pai. Isso cria um efeito responsivo para a imagem.

Etapa 3: layout da caixa flexível

O layout Flexbox é altamente recomendado para criar um design de site responsivo. Ele permite que os elementos HTML sejam exibidos em uma determinada posição e redimensione o espaço disponível para cada filho de acordo com o tamanho disponível pelo div pai. O layout do Flexbox contém várias propriedades que fornecem muita liberdade ao desenvolvedor, como no código abaixo:

No trecho de código acima:

• Primeiro, crie um elemento div pai com um id de “ pai ' dentro de ' ' marcação.
• Em seguida, crie vários elementos div filho e atribua a eles uma classe de “ criança ”.
• Em seguida, selecione a opção “ pai ” e forneça o valor de “ flex ” para o CSS “ mostrar ' propriedade.
• Depois disso, forneça um valor de “ 1 ' para o ' flex ” propriedade para cada “ criança ” que faz com que o elemento filho seja exibido como um flex.

Depois de executar o código acima, a página da Web ficará assim:

A saída acima mostra que o elemento filho está obtendo largura igual quando o navegador é redimensionado.

Etapa 4: layout da grade

O layout de grade cria uma grade e atribui os elementos HTML dentro da parte da grade. Os elementos da grade mudam em relação ao tamanho da tela da página da web. Ele cria um design responsivo conforme o tamanho do elemento HTML muda de acordo com a tela do dispositivo:

No código acima:

• Primeiro, crie um div pai e atribua a ele uma classe de “ componente ' dentro de ' ' marcação. Depois disso, crie três elementos div filhos nele.
• Em seguida, no arquivo CSS, atribua um “ grade ” valor para o “ mostrar ” propriedade para o “ recipiente ” div.
• Depois disso, crie três partes de tamanho igual na página da Web usando o botão “ grade-modelo-coluna ” e defina-a igual a “ 1fr 1fr 1fr ” onde fr significa “ fração ”.

Depois de compilar o código acima, a saída fica assim:

A saída mostra que os divs estão se redimensionando de acordo com o tamanho da tela com proporções iguais.

Etapa 5: consultas de mídia

O uso de consultas de mídia para criar um design responsivo é algo antigo, mas ainda assim, a maioria dos sites usa consultas de mídia. As consultas de mídia podem ser adicionadas diretamente no arquivo CSS após adicionar o estilo padrão para o elemento HTML selecionado. A consulta de mídia torna o código um pouco mais longo e confuso. Porque o desenvolvedor precisa inserir código para cada tamanho de tela separadamente.

Por exemplo, veja o trecho de código abaixo:

No trecho de código acima:

• Primeiro, defina a consulta de mídia que aplica as propriedades CSS à classe de elemento selecionada “ componente ” quando a largura do tamanho da tela for maior que “ 640px ”.
• Em seguida, selecione a “classe de componente e defina o valor de “ verde floresta ' para o ' cor de fundo ' propriedade.

Em seguida, para o trecho de código acima:

• Defina a consulta de mídia para aplicar estilos quando o tamanho da largura for menor que “ 1000px ”.
• Agora, selecione a opção “ componente ” e forneça um valor de “ Trapaceiro azul ' para o ' cor de fundo ' propriedade:

Depois de executar os trechos de código acima, a saída se parece com esta:

A saída mostra que a consulta de mídia está alterando o plano de fundo com base no tamanho da tela. O tamanho da fonte, largura, altura e outras propriedades CSS também podem ser aplicadas seguindo o mesmo padrão.

Os possíveis tamanhos de tela de breakpoints a serem considerados ao usar as consultas de mídia são:

• Para ' pequeno ” tamanho da tela, defina a largura menor que “ 640px ”.
• Para ' médio ” tamanho da tela da janela de visualização, a largura varia entre “ 641px ' e ' 1007px ”.
• Para ' grande ” tamanho da tela, defina a largura para “ 1008 px ' ou melhor.

Conclusão

Para criar um design de site responsivo, os desenvolvedores precisam adicionar o “ janela de visualização ” marca no “ ”seção de tags. Em seguida, use o “ Flexbox ' e ' Grade ” Esquema. Esses módulos de layout ajudam a criar um design responsivo. No final, o “ consultas de mídia ” ajudam o desenvolvedor a estilizar diferentes versões do mesmo site para diferentes tamanhos de tela. Este artigo demonstrou as etapas pelas quais um design de site responsivo pode ser criado.