What is the "correct" logical way of building good responsive design with CSS3?

Question

So I've dived into 'Responsive Design' and have gotten a fair understanding of how this works. However there are specifically two things I need to get my head around.

My "logical" way of thinking is like this: If screen size is less than 320px, then do A, if screen size is less than 480px do B.

@media only screen and (max-width: 320px) { Do one thing here}
@media only screen and (max-width: 480px) { Do another thing here}

The problem with this is that css in max-width: 480px is also affected if screen width is less than 320.

When I look at examples, I see they are using something like:

@media only screen and (min-width: 290px) {}
@media only screen and (min-width: 544px) {}
@media only screen and (min-width: 960px) {}

This basically says that is screen is larger than 290px, do this and if screen is larger than 544px, do that. But I will get the same problem here. Code in min-width: 290px will also be used in any screen size larger than 290px.

So the only solution I can think of that will only work for a specific screen range, is using this:

@media only screen and (max-width: 320px) {}
@media only screen and (min-width: 321px),
only screen and (max-width: 480px){}
@media only screen and (min-width: 640px),
only screen and (max-width: 481px){}

Can anyone advice me on this?

Looking at examples, I see a loot of "redundant" code. Much of the same code is repeated, just having different values:

@media only screen and (max-width : 930px),
only screen and (max-device-width : 930px){
    nav li a {
        width: 25%;
        border-bottom: 1px solid #fff;
        font: 400 11px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
    }

    nav li:last-child a, nav li:nth-child(4) a { border-right: none; }
    nav li:nth-child(5) a { border-bottom: none; }
}

@media only screen and (max-width : 580px),
only screen and (max-device-width : 580px){
    nav li a {
        width: 50%;
        font: 400 12px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    nav li:nth-child(even) a { border-right: none; }
    nav li:nth-child(5) a { border-bottom: 1px solid #fff; }
}

For large sites, I can just imagine that this will create a lot of code and large CSS files.

Is this becoming the new standard as we have to work with responsive design?

Would it be an option to do following?:

@media only screen and (min-width: 640px) { @import url("css/640.css");}

Answer 1

For a start you're writing/referencing slightly more code than is necessary.

For example:

@media only screen and (min-width: 321px),
only screen and (max-width: 480px) {

can also be written as:

@media only screen and (min-width: 321px) and (max-width: 480px) {

You should never be repeating CSS inside a media query, anything that is set for any screen size, for example background colour or font-family should be set outside of any media query. This means it is only wrote once and applies to them all. Inside each media query should only be code that only affects that specific size. (e.g. widths, font-sizes, etc)

I wouldn't recommend importing css files and the like, just put it all into one, with global styles at the top, and then screen size specific styles inside media queries underneath that. Don't be put off by large css files, it is easier/quicker to download one 10kb file, than ten 1kb files.

I made an example .css file to show you here. Note this would create a horrible site, it is just intended to show you how you could layout code and what goes where.

The example above assumes browser support of media queries. Without it the site would fall on its arse. If you aren't 100% sure of media query support (and aren't using Respond.JS) I would recommend putting the desktop site in the global styles, then overwriting as unnecessary to ensure a fallback for non-supporting browsers

Answer 2

What you wrote is pretty much a way to do it. but like BoltClock says, you have many ways to make a responsive website.

Altho, to avoid 'double' css, you can also make a main css file. Those things that don't need to change in the whole website - no matter what screensize - goes into this file. (for example your font). Besides that your css files will indeed be 'huge' depending on how far you want to go with responsive.

For answering your question if this will be the new standard...it still depends on the owner of the website, if he wants to support mobile friendly websites or not.

I hoped this helped a bit :) good luck!