O termo design responsivo da web corresponde à estratégia de fazer um site se comportar dependendo do dispositivo em que está sendo exibido. Por exemplo, você pode fazer um site alterar seu comportamento de acordo com a largura da tela, resolução, orientação, etc. Um web design responsivo torna um site dinâmico de natureza.

Se você tornar seu site responsivo, não há necessidade de desenvolver o mesmo site repetidamente para cada novo dispositivo que surge no mercado. O site mudaria automaticamente seu comportamento com base no desejo do usuário. Essa capacidade de resposta fará com que o site mude sua aparência quando o usuário mudar de usar o site em uma área de trabalho para um telefone celular.

Agora sabemos o que é um site responsivo, a próxima grande pergunta é como gerar um. Considere a próxima seção para explorar a resposta a esta pergunta.

Como tornar seu design de web responsivo

Tornar um site responsivo envolve tornar seus elementos como texto, imagens, etc. flexíveis, utilizando certos layouts. Abaixo, mostramos várias entidades que tornam sua página da web responsiva.

1. Janela de exibição

A primeira e a principal coisa que você deve incluir em seu arquivo de código -fonte para tornar sua página da web responsiva é adicionar uma meta tag responsiva.

Nesta tag, a largura é definida como largura do dispositivo, o que significa que a largura da página da web mudará na correspondência à largura do dispositivo, enquanto a escala inicial é definida como 1, o que significa que quando a página da web é carregada pelo navegador Pela primeira vez, o nível de zoom será 1. Esta tag comanda basicamente o navegador para ajustar as medidas de uma página da web de acordo com várias situações.

2. Consultas de mídia

As consultas de mídia CSS permitem alterar a aparência da estrutura da web, dependendo do tipo de dispositivo que exibe o site, como desktops, telefones, laptops, etc., e se prove útil para projetar sites responsivos. Além disso, eles podem ser usados ​​para avaliar coisas como a altura e a largura do dispositivo e a viewport, a orientação do dispositivo ou a resolução da tela.

Essas consultas utilizam certos pontos de interrupção que são chamados de pontos nos quais o layout de um site altera correspondente ao tamanho da tela do tipo de dispositivo.

Sintaxe

@media não | apenas tipo de mídia e (recurso de mídia e | ou | não recurso de mídia)

//Código;

Palavras -chave explicadas

• não: Ele reverte a semântica de uma consulta de mídia.
• apenas: Impede as versões antigas de um navegador de implementar a consulta de mídia.
• e: Ele combina um tipo de mídia com um determinado recurso de mídia.

Agora vamos explorar um exemplo de como você torna sua página da web responsiva usando consultas de mídia.

Exemplo
Abaixo, estamos demonstrando uma consulta de mídia.

Html

Olá Mundo!

Aqui nós definimos um

elemento e colocou algum texto dentro dele.

CSS

H1
Fonte-família: 'Times New Roman', Times, Serif;

@media Screen e (Min-Width: 720px)
H1
Fonte-família: Verdana, Genebra, Tahoma, Sans-Serif;

No código acima, a família inicial do parágrafo é definida como Times New Roman, enquanto, depois de aplicar a consulta de mídia, especificamos que, se a largura mínima da tela for 720px ou mais larga, a família de fontes do parágrafo irá Mudança para Verdana. Redimensione a janela do seu navegador para ver o efeito da consulta de mídia.

Saída
Quando a menor largura da tela é 720px ou maior.

Quando a largura mínima da tela é menor que 720px.

A consulta de mídia está funcionando corretamente.

3. Flexbox

CSS Flexbox é um modelo de layout que permite um arranjo eficiente e dinâmico de elementos. Este layout é unidimensional que permite a colocação de elementos dentro de um recipiente com espaço igualmente distribuído. Esse layout torna os elementos responsivos, o que significa que os elementos mudam seu comportamento de acordo com o tipo de dispositivo que os exibe. Torna os elementos flexíveis e fornecem a posição apropriada e simetria.

Um Flexbox consiste nos seguintes componentes que são; a contêiner flex e a Item flexível. Um contêiner Flex define as propriedades do elemento ancestral, definindo sua tela para flexionar ou embelezar. Enquanto isso, um item flexível descreve as propriedades dos elementos sucessores e pode haver numerosos elementos presentes dentro de um contêiner flexível.

Além disso, existem várias propriedades associadas a um Flexbox que ajuda a tornar um design de web responsivo. Aqui vamos mostrar como você pode usar um Flexbox para tornar seu site responsivo.

Exemplo
No exemplo abaixo, mostramos como gerar uma grade de imagem responsiva usando o Flexbox.

Html

Para fazer uma grade de imagem, estamos fazendo um elemento div maior e aninhando dois elementos div dentro daquela div maior. Ambos os elementos da div aninhados nidificam ainda três imagens cada.

CSS

.contêiner
exibição: flex;
FLEX-WRAP: WRAP;
preenchimento: 5px;

A div com a classe "contêiner" está sendo exibida como uma caixa flexível e recebeu certos preenchimentos. Além disso, a propriedade Flex-Wrap é atribuída valor a embrulho, o que significa que, se necessário, as imagens serão embrulhadas dentro do contêiner.

CSS

.colunas img
largura: 100%;

.colunas
flex: 50%;
MAX-LUDA: 50%;
preenchimento: 5px;

As imagens receberam 100% de largura para que se encaixem adequadamente no recipiente, além de usar o flex e a largura máxima, estamos criando duas colunas que serão colocadas próximas uma da outra.

CSS

@media (max-width: 600px)
.colunas
flex: 100%;
MAX-LUDA: 100%;

Junto com o Flexbox, também estamos usando a consulta de mídia. A consulta de mídia acima especifica que, se a largura for menor que a especificada, a duas colunas será convertida em uma.

Saída
Escala a janela do seu navegador para cima e para baixo para ver o efeito.

Uma grade de imagem responsiva foi criada.

4. Bootstrap

É uma estrutura CSS que permite que seus usuários criem sites responsivos na natureza e com uma abordagem móvel primeiro. Esta abordagem especifica que o web design é desenvolvido pela primeira vez para telefones celulares e, posteriormente, para outros dispositivos. Aqui vamos demonstrar como fazer uma barra de navegação que é responsiva na natureza usando bootstrap.

Exemplo
Estamos usando a versão mais recente do Bootstrap, que é o Bootstrap 5 para fazer uma barra de navegação.

Html

Primeiro de tudo, utilizar o Bootstrap 5 inclui CDN para CSS e JavaScript em seu arquivo html como mostramos acima.

Html

No código acima, criamos uma barra de navegação usando várias classes de bootstrap 5. O .Navi A classe é usada para embrulhar uma barra de navegação junto com .NavBar-Expand-Sm classe para colapso responsivo. Enquanto isso .BG-success e .Navbar-Dark são os diferentes esquemas de cores fornecidos à barra de navegação.

O .recipiente A classe envolve todos os elementos de uma barra de navegação com uma largura fixa. Enquanto isso, o .Navbar-Nav A classe é usada, crie uma barra de navegação com altura máxima e é leve e também suporta suspensos suspensos.

O .NAV-ITEM, e .Nav-link são usados ​​para criar vários itens de lista na barra de navegação e o .ativo Classe torna um link ativo.

Saída

Uma barra de navegação responsiva foi gerada com sucesso.

Conclusão

O design da web responsivo corresponde à estratégia de fazer um site alterar seu comportamento, dependendo do dispositivo em que está sendo exibido. Se você tornar seu site responsivo, não há necessidade de desenvolver o mesmo site repetidamente para cada novo dispositivo que surge no mercado. Esse site pode ser desenvolvido utilizando várias entidades, como incluir uma meta -tag responsiva em seu arquivo, usando consultas de mídia, flexbox ou bootstrap. Aqui neste artigo, mostramos várias técnicas com as quais você pode tornar seu site responsivo.