Que abordagens de design responsivo conhece?

Consultas de Media: Uso de regras CSS @media para aplicar estilos com base nas características do dispositivo (largura, altura da tela, orientação, etc.).

/* Exemplo de Media Query */
@media (max-width: 600px) {
  .container {
    width: 90%;
  }
}

Layout de grelha flexível (Grid flexível): Criação de layouts usando unidades relativas (%, vw, vh) e propriedades flexíveis (flex, grid).

/* Exemplo de Flexbox */
.parent {
  display: flex;
  flex-wrap: wrap; /* Permite que os elementos passem para uma nova linha */
}

.child {
  flex: 1 1 200px; /* Permite que o elemento se estique, encolha e tenha uma largura base */
}

Imagens e media flexíveis: Uso de propriedades CSS max-width para que as imagens e outros media se dimensionem proporcionalmente.

/* Exemplo de imagem flexível */
img {
  max-width: 100%; /* A imagem não excederá a largura do contêiner pai */
  height: auto;    /* Mantém as proporções */
}

Mobile-First vs. Desktop-First:

• Mobile-First: O estilo é desenvolvido primeiro para dispositivos móveis e depois expandido para telas maiores usando min-width em Media Queries. É considerado uma boa prática, pois simplifica a estilização para recursos limitados de dispositivos móveis e melhora o desempenho.
• Desktop-First: O estilo é desenvolvido primeiro para desktops e depois reduzido para telas pequenas usando max-width em Media Queries.

Detecção de recursos (Feature Detection): Uso de JavaScript para determinar as capacidades do navegador ou dispositivo (por exemplo, suporte a interface tátil) e aplicar estilos ou funcionalidades apropriadas. Ferramentas como Modernizr podem ajudar.

Tipografia responsiva: Alteração do tamanho da fonte e da altura da linha dependendo do tamanho da tela, frequentemente usando unidades relativas (em, rem, vw) e Media Queries.

/* Exemplo de tipografia responsiva */
h1 {
  font-size: 2em;
}

@media (min-width: 768px) {
  h1 {
    font-size: 3em;
  }
}

Detecção do lado do servidor: Identificação do tipo de dispositivo ou navegador no servidor e envio da versão adequada da página ou estilos. Menos comum no desenvolvimento frontend moderno.