Media query

Um bloco de CSS que só vale quando a tela cumpre uma condição, tipo ter menos de 768px de largura.

Também aparece como "@media", "breakpoint", "ponto de quebra", "responsivo".

No mundo do Design

O Figma chama isso de Breakpoints do protótipo

Media query é o "se" do CSS pra tamanho de tela. Você escreve um bloco de regras e diz em que situação ele entra em vigor.

.grade {
  display: grid;
  grid-template-columns: 1fr;
}
 
@media (min-width: 768px) {
  .grade {
    grid-template-columns: repeat(3, 1fr);
  }
}

A largura onde o layout muda é o breakpoint. É o mesmo conceito dos frames de desktop, tablet e mobile que você já entrega, com a diferença de que no código o layout entre dois breakpoints é elástico, não fixo.

Mobile primeiro, e não é moda

Repare que no exemplo o padrão é uma coluna e o min-width acrescenta colunas. Escrever assim, do menor pro maior, dá menos código e menos exceção do que começar pelo desktop e ir cortando.

Nem toda media query é sobre tamanho

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none;
    transition: none;
  }
}

Essa aí desliga animação pra quem pediu menos movimento no sistema operacional. É acessibilidade em quatro linhas e quase ninguém entrega no handoff.

Outros termos de CSS

Quer o assunto inteiro e não só a definição? Os guias pegam cada tema do começo ao fim.