O que deve ser especificado em CSS para configurar e aplicar estes pontos de interrupção?

A consulta de meios @media é utilizada. Dentro dela, definem-se condições para aplicar estilos, baseadas nas características do dispositivo ou na área de visualização.

Parâmetros principais das consultas de meios:

• width / height: Largura / altura da área de visualização.
• min-width / min-height: Largura / altura mínimas da área de visualização.
• max-width / max-height: Largura / altura máximas da área de visualização.
• orientation: Orientação do dispositivo (portrait ou landscape).

Exemplo de uso para configurar pontos de interrupção:

/* Estilos padrão para telas menores que 768px */
body {
  font-size: 16px;
}

/* Ponto de interrupção para telas de 768px a 991px */
@media (min-width: 768px) and (max-width: 991px) {
  body {
    font-size: 18px;
  }
}

/* Ponto de interrupção para telas de 992px em diante */
@media (min-width: 992px) {
  body {
    font-size: 20px;
  }
}

Estratégias comumente usadas para definir pontos de interrupção:

1. Mobile First: Primeiro, definem-se estilos para as menores telas, depois adicionam-se consultas de meios com min-width para telas mais largas.
2. Desktop First: Primeiro, definem-se estilos para telas grandes, depois adicionam-se consultas de meios com max-width para telas mais estreitas.

A escolha da estratégia depende do projeto e das preferências.

Valores padrão aproximados para pontos de interrupção (dependem do framework ou acordo):

Dispositivo	Faixa de largura	Consulta de meios (Mobile First)	Consulta de meios (Desktop First)
Telefone pequeno	< 576px	Não aplicável (estilos básicos)	@media (max-width: 575.98px)
Telefone	>= 576px	@media (min-width: 576px)	@media (max-width: 767.98px)
Tablets	>= 768px	@media (min-width: 768px)	@media (max-width: 991.98px)
Laptops	>= 992px	@media (min-width: 992px)	@media (max-width: 1199.98px)
Desktops	>= 1200px	@media (min-width: 1200px)	@media (max-width: 1399.98px)
Grandes desktops	>= 1400px	@media (min-width: 1400px)	Não aplicável (estilos básicos)

É importante escolher os pontos de interrupção com base no conteúdo e no layout, não apenas nos padrões de dispositivos. Eles devem ativar-se onde o layout começa a 'quebrar'.