Ayuda con estilos CSS definidos en una "media query"

Buenas,

Soy nuevo en el foro. Primero quería felicitar al autor de la página, es genial. Hace un tiempo ya entro para leer los libros de HTML, CSS y JS. Ahora quise poner en práctica estos conocimientos y me surgió un problema que espero me puedan ayudar.

Quiero hacer una página responsive, pero el @media (min-width:---px) no me funciona como pretendo. Desde el lunes que estoy buscando alternativas pero no doy con la solución. Así que armé una página muy sencilla, a ver si me funcionaba y tampoco funciona. El código de la página es el siguiente:

<html>
    <head>
        <style>
            body {
                background-color: green;
            }
            @media (min-width:768px) {
                body { background-color: red; }
            }
        </style>
    </head>
    <body>
            <h1> Lorem Ipsum </h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi id adipiscing augue, quis placerat elit. Suspendisse ornare fermentum faucibus. Duis odio augue, feugiat a massa dapibus, mattis congue sapien. Vestibulum a dolor cursus arcu interdum tempor.</p>
    </body>
</html>

Se supone que en el móvil se debería ver con un color de fondo verde, sin embargo, se ve en rojo. Qué es lo que estoy haciendo mal? Gracias por su ayuda

Edit: Agrego una captura de la prueba en Chrome: Imgur

Respuestas

El código CSS está bien, pero creo que te falta añadir la siguiente etiqueta en la parte HTML:

<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        ...

@javiereguiluz

23 junio 2016, 8:46

Muchas gracias Javier! Excelente la página

@cebollitav

23 junio 2016, 23:06