A responsividade é a capacidade do seu site/componente ser funcional independente do tamanho da tela. Ou seja, o seu componente irá se adaptar independente se for acessado de um computador, tablet ou celular.
Hoje em dia, 62% dos brasileiros acessam a internet somente pelo celular *(TIC Domicílios, 2022).* Sendo assim, a responsividade é obrigatória para qualquer site desenvolvido. Os benefícios de possuir responsividade em um site envolvem:
Exemplo:
O componente header é assim no desktop
Aplicando a responsividade, o componente se adapta às telas menores e continua oferecendo uma boa experiência ao usuário
Sem aplicar a responsividade, o componente não se adapta aos diferentes tamanhos de tela e oferece uma experiência pior para os usuários que não estejam acessando o site em dispositivos específicos (nesse caso, quem não acessa pelo desktop, tem uma experiência pior)
As devtools são ferramentas de desenvolvimento web dentro do navegador. Com elas, é possível debugar, testar e analisar sua página!
Uma das funcionalidades é o modo de design responsivo, que permite a mudança das dimensões da sua página para você simular como ela ficaria em diferentes dispositivos.
Para abrir as devtools:
Clique com o botão direito na página -> Inspecionar