Criar layouts responsivos e adaptativos é um aspecto crucial do desenvolvimento web moderno. Desejamos sempre uma página da web que seja acessível em todos os dispositivos. Felizmente, os desenvolvedores web têm acesso a um conjunto robusto de ferramentas integradas aos navegadores da web.

Vamos considerar as ferramentas web do Chrome:

Ferramentas

Para acessar as ferramentas de responsividade e começar a utilizá-las, precisamos seguir os seguintes passos:

1. Abra as ferramentas de desenvolvedor como fizemos anteriormente. É possível fazer isso de diversas formas: com o mouse, clicando com o botão direito e selecionando "Inspecionar", ou usando o atalho de teclado "Ctrl+Shift+I" (Windows, Linux) ou "Command+Option+I" (Mac).
2. Clique no ícone 5. Entraremos no modo responsivo. Para sair do modo responsivo, precisamos clicar novamente no ícone 5.

Funcionalidades adicionais:

1. Podemos alterar (imitar) a largura do dispositivo arrastando o elemento 6.
2. Podemos selecionar um dispositivo específico usando o campo 1. Existem alguns dispositivos de uso comum entre os usuários.
3. Podemos definir a largura (campo 2) e a altura (campo 3) do tamanho da tela do dispositivo.
4. Podemos mudar a escala (campo 4). Geralmente, isso é usado quando lidamos com valores grandes e precisamos visualizar o layout inteiro.
5. 7 é a área de visualização. Vemos a visualização do site para tal tamanho de tela de largura e altura.

Nota

Todos os navegadores modernos (por exemplo, Google Chrome, Mozilla Firefox, Apple Safari, Microsoft Edge, etc.) possuem o mesmo conjunto de ferramentas. Não importa qual navegador escolhamos.