Responsive Design CSS Framework

style.css

/*==========  Mobile-First CSS Template  ==========*/
/*==========      danielsantoro.com      ==========*/

/* Custom, specific to iPhone Retina. Less important. */ 
@media only screen and (min-width : 320px) {
    /* This is a strange category, mainly because it only applies to certain iPhone models with Retina displays. Apple is strange in what they report as a "Pixel" on Retina screens, so to avoid your site looking cramped on iPhones then you can add styling here. This is a little bit of overkill, so feel free to nix this one if you don't have a specific model iPhone to test.
    It inherits any stylesheets or lines that come before it. */
}

/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {
    /* Mobile styles go here, and is only used for screens with a pixel width between 481px - 767px, so a good number of tablets and phones. 
    It inherits any stylesheets or lines that come before it as well as your styles above. */
}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
    /* Tablet styles go here, and is only used for screens with a pixel width between 768px - 991px, so mainly tablets in portrait mode. Here, you typically will want a full (or at least semi-full) menu and desktop view, perhaps with a sidebar hidden.
    It inherits any stylesheets or lines that come before it as well as your styles above. */
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
    /* Full site styles go here, and is only used for screens with a pixel width between 992px - 1199px, which will be a majority of your users Rarely do people have browsers fullscreen - your site should have complete funcionality for desktops at this point.
    It inherits any stylesheets or lines that come before it as well as your styles above. */
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
    /* Wide screen styles go here, and will be used for screens with a pixel width of 1200px or greater. This could be a full sized window, or a 4K display - in either circumstance, if you're using a solid background color or pattern it shouldn't matter, but if you have a background image, then a larger version would be helpful here. It's not recommended to make too many changes past this point - it's more of a headache on your part than it is a benefit to the user.
    It inherits any stylesheets or lines that come before it as well as your styles above. */
}