Seção extra baseada na documentação da W3C: https://www.w3schools.com/css/css3_mediaqueries.asp.

Com a grande variedade de dispositivos com tamanhos de tela diferentes que existem atualmente, em alguns casos é preciso definir regras de estilização específicas para cada um deles.

Para isto foram criadas as regras do tipo @media, que podem definir estilos baseado em:

• largura e altura da viewport
• largura e altura do dispositivo
• orientação
• resolução
• tipo de dispositivo

Formato

@media not|only mediatype and (expressions) {
  CSS-Code;
}

Quando toda a expressão seguida do @media é verdadeira o CSS interno será utilizado.

Mediatype

Este atribute define o tipo do dispositivo, e infelizmente não possui um amplo suporte no mercado.

• all: para todos os dispositivos.
• print: para impressão.
• screen: para telas de dispositivos (computadores, celulares, tablets, etc)
• speech: para leitores de tela

Exemplo:

Apagar uma div para impressões.

@media print {
  body {
    display: none;
  }
}