Responsividade

1. O que é responsividade?

Responsividade é a ténica de adaptar uma página web para vários dispositivos diferentes, ou seja, ocorrem mudanças no css baseadas na resolução. O recurso utilizado na responsividade é o "Media query".

2. Configuração HTML para responsividade:

Inicialmente, é necessário adicionar uma meta tag no head:

<meta name="viewport" content=""width=device=width, initial-scale="1.0">

3. Media Query:

Media Query é o recurso que usamos para criar o breakpoints. Os breakpoints adaptam o projeto para os diversos tipos de tela.
Ao configurar a largura, as regras são alteradas dependendo do tamanho da tela.

4. Breakpoints mais utilizados:

4.1 600px e abaixo: celular.
4.2 768 até 600px: tablets.
4.3 992px até 768px: mini-laptops.
4.4 992px e acima: laptop e desktop.