I think, in CSS; @media is use to make the website more responsible for different form factors, eg: phones, tablets. I'm a noobie as well, but according to what I know @media is mostly used to maintain the responsiveness of a webpage.
I see. It appears that the @ symbol is a special tool in CSS that doesn't directly affect the HTML. @font-face is used at the start of the CSS file when you want to use a specific font that was downloaded and added to your site's hosted files.