This content originally appeared on DEV Community and was authored by Anna Laura
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.
This content originally appeared on DEV Community and was authored by Anna Laura
Anna Laura | Sciencx (2024-06-25T19:53:59+00:00) Responsividade. Retrieved from https://www.scien.cx/2024/06/25/responsividade/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.