@media no css é o comando que permite fazer alterações no estilo do site, a partir de um tamanho específico da tela. Em outras palavras, quando a tela do usuário é grande, o site possui um estilo padrão. Mas quando o usuário acessa esse site por um celular, a tela é consequentemente menor, logo, essa mudança da tela grande para a tela menor, de maneira que o site fique adaptável, é feita com o comando @media no css.
Esse comando @media nos permite criar uma "nova folha de estilo" dentro da mesma. E inserir novos comandos que só entrarão em ação, quando a tela for do tamanho especificado no @media.
Considere o comando css abaixo:
@media (max-width: 768px) {
body {
padding: 4px 20px;
border: 2px solid rgb(102, 102, 102);
border-radius: 3px;
margin: 5px 50px;
}
}
Através desse comando, estamos mudando as configurações do body que entrarão em ação somente quando a tela do site estiver limitada a uma largura de 600px ou menor. Também configuramos o @media para o tamanho máximo de 425px. Isso significa que esse site horrível ao qual você lê, agora é adaptado para uma tela de celular também. VIVA o CSS.
O @media também permite selecionar somente os itens que quisermos para por exemplo, uma impressão. Para tal usamos o comando no css:
@media only print { ... }
Outras opções do @media são: