Ejemplo web responsive

<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:

a) width y height Ancho y alto del navegador (podemos añadir el prefijo min- o max-)
b) width y height Ancho y alto del dispositivo, móviles y tablets (podemos añadir el prefijo min- o max- )
c) orientation Orientación del móvil o tablet (para panorámico utilizaremos orientation:portrait, para vertical orientation:landscape)

@media screen and (max-width:980px) Se utiliza para definir un tamaño o inferior. En este caso, para 980px o menos.