Responsividade no Desenvolvimento Web
Dê importância a responsividade!
Inicie seu desenvolvimento para Smartphones e depois adicione as media queries para que seu projeto ajuste nas demais telas.
Seu projeto é como uma vitrine digital e nos dias atuais grande parte das pessoas utilizam smartphones com telas de diferentes resoluções.
Tendo seu projeto bem apresentado e ajustando automaticamente a resolução conforme o dispositivo do visitante pode ser o diferencial para conquistar novos clientes ou aquela sonhada vaga na área Tech.
Abaixo 7 dicas para se usar:
1. Smartphones (Portrait)
Usado para dispositivos móveis em modo retrato (vertical).
Aplica estilos para dispositivos móveis com largura de até 480px, como smartphones pequenos.
2. Smartphones (Landscape)
Usado para dispositivos móveis em modo paisagem (horizontal).
Aplica estilos para smartphones com largura de até 767px quando estão em modo horizontal.
3. Tablets (Portrait)
Usado para tablets em modo retrato (vertical).
Aplica estilos para dispositivos como tablets com largura entre 768px e 1024px.
4. Tablets (Landscape)
Usado para tablets em modo paisagem (horizontal).
Aplica estilos para tablets ou dispositivos maiores, como iPads em modo horizontal.
5. Laptops ou Telas Médias
Usado para laptops ou telas de tamanho médio.
Aplica estilos para dispositivos como laptops ou monitores de tamanho médio, com largura entre 1025px e 1440px.
6. Monitores Grandes
Usado para monitores grandes ou desktops.
Aplica estilos para telas de alta resolução, como monitores de desktop grandes, com largura acima de 1440px.
7. Telas Ultra-Largas
Usado para telas de resolução muito alta.
Aplica estilos para monitores com larguras maiores que 1920px, como monitores ultrawide ou TVs.
Abaixo recomendação de arquivo CSS:
/* Smartphones (Portrait) */
/* Estilos aplicados para dispositivos móveis com largura de até 480px, como smartphones pequenos */
@media (max-width: 480px) {
/* Seus estilos aqui */
}
/* Smartphones (Landscape) */
/* Estilos aplicados para smartphones com largura de até 767px em modo paisagem (horizontal) */
@media (max-width: 767px) and (orientation: landscape) {
/* Seus estilos aqui */
}
/* Tablets (Portrait) */
/* Estilos aplicados para tablets com largura entre 768px e 1024px em modo retrato (vertical) */
@media (min-width: 768px) and (max-width: 1024px) {
/* Seus estilos aqui */
}
/* Tablets (Landscape) */
/* Estilos aplicados para tablets ou dispositivos maiores com largura entre 1024px e 1280px em modo paisagem (horizontal) */
@media (min-width: 1024px) and (max-width: 1280px) {
/* Seus estilos aqui */
}
/* Laptops ou Telas Médias */
/* Estilos aplicados para laptops ou monitores de tamanho médio com largura entre 1025px e 1440px */
@media (min-width: 1025px) and (max-width: 1440px) {
/* Seus estilos aqui */
}
/* Monitores Grandes */
/* Estilos aplicados para telas de alta resolução com largura acima de 1440px, como monitores de desktop grandes */
@media (min-width: 1441px) {
/* Seus estilos aqui */
}
/* Telas Ultra-Largas */
/* Estilos aplicados para monitores com larguras maiores que 1920px, como monitores ultrawide ou TVs */
@media (min-width: 1920px) {
/* Seus estilos aqui */
}
Espero que seja de grande utilidade para vocês.
Me sigam nas redes sociais
https://www.linkedin.com/in/wsawebmaster
Grande Abraço
