responsive design using css3 - html

Question

I am trying to using media queries. I have included meta name="viewport" content="width=device-width, initial-scale=1"> in my head and #media (min-width: 768px) {
background-color: red;
}
in my css. Is there something I am missing because this does not work.

Answer 1

Your media query is ok, but your background-color is just a CSS property, you have to specify which element is concerned:
#media (min-width: 768px) {
html, body {
background-color: red;
}
}

Answer 2

You tagged this as utilizing SASS as well as responsive design, so I think it's appropriate to offer a more elaborate, SASS-oriented answer, in case other people have related questions in the future.
First off, everything #migli said was spot on - you have to make sure that you are targeting a specific DOM element to style in your CSS. One of the major benefits of using SASS is that it allows you to keep your code DRY, and creating breakpoints makes writing media queries super simple.
To do so, set up a #mixin that establishes your specific breakpoint thresholds (e.g. here is a easy-to-follow general-purpose example by Tim Knight:
#mixin breakpoint($class) {
#if $class == xs {
#media (max-width: 767px) { #content; }
}
#else if $class == sm {
#media (min-width: 768px) { #content; }
}
#else if $class == md {
#media (min-width: 992px) { #content; }
}
#else if $class == lg {
#media (min-width: 1200px) { #content; }
}
}
Now, as you're editing your SASS files, you can compartmentalize your code, to keep it DRY. For example, the following SASS:
body {
height: 100%;
width: 100%;
font-size: 1.8em;
#include breakpoint(md) {
font-size: 1.5em;
}
}
outputs
body {
height: 100%;
width: 100%;
font-size: 1.8em;
}
#media (min-width: 992px) {
body {
font-size: 1.5em;
}
This is a small example, but as the size and scope of your project grows, saving keystrokes and improving readability will greatly enhance your productivity (and sanity!).