<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Este meta tag se utiliza para controlar cómo aparecerá el contenido HTML en los navegadores móviles. Así nos aseguramos que el contenido se ajusta al ancho del dispositivo. En este caso estamos indicando que el contenido tendrá el ancho del dispositivo y que la escala inicial es de 1
La expresión @media de css3, es fundamental. Nos permite estableces condiciones desde CSS para conocer el dispositivo desde el se accede a nuestra web y aplicar nuevos estilos CSS. Por ejemplo: podemos eliminar el sidebar de nuestro blog si el navegador mide menos de 600px.
Tenéis la info más detallada en: http://www.w3.org/TR/css3-mediaqueries/
Las propiedades que más nos interesan son las siguientes:
@media screen and (max-width:980px) Se utiliza para definir un tamaño o inferior. En este caso, para 980px o menos.