Diz respeito à arte de fazer websites que funcionam em diferentes tamanhos/orientações de telas.

Isto é, o layout e a experiência do website respondem ao dispositivo sendo usado pelo usuário para garantir a usabilidade.

Viewport: é, basicamente, o conteúdo visível no browser menos o UI.

🖥️ Media queries

Permitem especificar os estilos a serem aplicados somente a determinadas larguras de tela.

Exemplo de uma media query simples:

@media (max-width: 800px) {
    body {
        background-color: cyan;
    }
}

Exemplo de sintaxe mais geral:

@media only screen and (max-width: '768px') {
	/* styles */
}

Media queries começam sempre com @media.

A keyword only é um operador lógico que previne que browsers mais antigos que não suportam media queries apliquem esses estilos. Caso contrário, eles seriam aplicados em geral (não só para as larguras de tela especificadas).

screen é um tipo de mídia (como print ou all) que ajuda a escrever estilos para tamanhos diferentes de telas. print, por exemplo, permite editar os estilos que aparecerão na versão imprimível de uma tela.

O and também é um operador lógico que permite combinar tipos e/ou features de mídia. Nesse caso, está-se combinando um tipo de mídia (screen) com uma feature (parte do max-width).

Outros dois operadores operadores lógicos úteis são or e not.