Criar layouts responsivos e adaptáveis é um aspecto fundamental do desenvolvimento web moderno. Sempre buscamos uma página web acessível em todos os dispositivos. Felizmente, desenvolvedores web contam com um conjunto robusto de ferramentas integradas aos navegadores.

Considere as ferramentas do Chrome:

Ferramentas

Para acessar as ferramentas responsivas e começar a utilizá-las, precisamos do seguinte:

1. Abrir as ferramentas de desenvolvedor como feito anteriormente. As formas possíveis são: utilizando o mouse, clicando com o botão direito e selecionando o campo "Inspecionar", ou utilizando o atalho de teclado "Ctrl+Shift+I" (Windows, Linux) ou "Command+Option+I" (Mac);
2. Clicar no ícone 5. O modo responsivo será ativado. Para fechar o modo responsivo, é necessário clicar novamente no ícone 5.

Funcionalidades adicionais:

1. É possível alterar (simular) a largura do dispositivo arrastando o elemento 6;
2. É possível selecionar um dispositivo específico utilizando o campo 1. Existem alguns dispositivos amplamente utilizados pelos usuários;
3. É possível definir a largura (campo 2) e a altura (campo 3) do tamanho da tela do dispositivo;
4. É possível alterar a escala (campo 4). Geralmente, é utilizada quando lidamos com valores grandes e precisamos visualizar todo o layout;
5. 7 é a viewport. Visualiza-se a aparência do site para o tamanho de tela definido em 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 há diferença em qual navegador é selecionado.