image

Acesse bootcamps ilimitados e +650 cursos

50
%OFF
Article image
Wagner Andrade
Wagner Andrade14/09/2024 09:25
Compartilhe

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

    Compartilhe
    Comentários (1)
    Ronaldo Schmidt
    Ronaldo Schmidt - 14/09/2024 10:27

    Ola amigo.

    Isso é realmente muito util .

    A primeira impressao é a que fica principalmente quando falamos sobre sites.

    Se um usuario visitar uma pagina e não ter uma boa experiencia dificilmente ira visitar um site novamente. A não ser que seja um site do governo que sao horriveis(a proposito quem é o designer)🙄.

    Importante sempre entregar um projeto de qualidade e revisado para evitar constrangimentos.

    Obrigado pelas dicas e boa jornada.