Olá! Bem vindo ao nosso módulo 5. Você está no EmÁudio concursos e eu prometi que ia trazer para você uma aula extra sobre design responsivo e cá estou eu. 

Que que é o design responsivo? Pessoal, o design responsivo é uma abordagem de desenvolvimento web que visa criar sites capazes de se adaptar automaticamente ao tamanho da tela do dispositivo em que estão sendo visualizados. Isso significa que o layout do site, ele muda, ele se ajusta para fornecer a melhor experiência de visualização possível, independentemente de ser acessado em um desktop, em um tablet ou um smartphone.

Quais são as características do design responsivo? Ele é flexível. Ele utiliza layouts fluidos que se expandem e encontrarem conforme o tamanho da tela, as imagens e outros elementos de mídia são redimensionados automaticamente para caber no espaço disponível.

Midia Queries é a parte essencial do CSS. As Midia Queries permitem aplicar estilos CSS diferentes, com base nas características do dispositivo, como largura, altura e orientação da tela. Por exemplo, um site pode usar uma determinada fonte layout para telas de desktop, mas ajustar para uma fonte menor um layout de uma coluna em dispositivos móveis, entendeu?

Unidade de medida relativa. Olha, em vez de usar pixels fixos, o design responsivo usa unidades de medida relativas, como porcentagens, EMS e REMS pra definir tamanhos de elementos. Que que acontece? Isso permite que os elementos redimensionem proporcionalmente ao seu contêiner ou à tela.

Elementos flexíveis, elementos como menus de navegação e colunas podem se reorganizar ou esconder dependendo do espaço disponível. Por exemplo, um menu horizontal, um desktop pode se transformar em um menu de ham... Ler mais