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.
Top comments (0)