O que é um ponto de interrupção em layout responsivo?

O ponto de interrupção (breakpoint) no design responsivo é o valor limite da largura da tela do dispositivo, ao atingir ou ultrapassar o qual os estilos CSS dos elementos da página mudam.

O objetivo principal dos pontos de interrupção:

• Garantir uma visualização ótima do conteúdo: Em diferentes tamanhos de tela, os blocos podem ter tamanhos, posições e margens diferentes.
• Ocultar/exibir elementos: Por exemplo, em dispositivos móveis, pode-se ocultar a barra lateral, e em desktops, exibi-la.
• Alterar fontes e imagens: Para melhor legibilidade e desempenho.

Os pontos de interrupção são definidos usando media queries em CSS:

/* Estilos padrão (para dispositivos móveis primeiro) */
body {
  font-size: 16px;
}

/* Estilos para telas com largura a partir de 768px */
@media screen and (min-width: 768px) {
  body {
    font-size: 18px;
  }
  .sidebar {
    display: block; /* Mostrar barra lateral */
  }
}

/* Estilos para telas com largura a partir de 1200px */
@media screen and (min-width: 1200px) {
  body {
    font-size: 20px;
  }
}

Os pontos de interrupção típicos baseiam-se em tamanhos padrão de dispositivos, mas podem ser personalizados de acordo com o design específico. Exemplos de pontos de interrupção padrão:

Tamanho da tela	Uso típico
Até 576px	Muito pequenos (por exemplo, smartphones antigos em modo retrato)
576px - 768px	Pequenos (smartphones em modo paisagem, tablets pequenos)
768px - 992px	Médios (tablets em modo retrato, laptops)
992px - 1200px	Grandes (laptops, desktops)
Acima de 1200px - 1400px+	Muito grandes (monitores grandes)

É importante desenvolver o design "mobile-first", começando pelos pontos de interrupção menores e adicionando estilos para telas maiores, o que facilita a sobrescrição de estilos.