What is the “right” logical way to build a good responsive design using CSS3?

Question

So, I immersed myself in Responsive Design and got a clear idea of ​​how this works. However, there are two things that I need to lower my head.

My logical thinking is this: if the screen size is less than 320 pixels, then do A, if the screen size is less than 480 pixels, 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 is that css in max-width: 480px also affects if the screen width is less than 320.

When I look at the examples, I see that they use 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 means that the screen is larger than 290 pixels, do it, and if the screen is larger than 544 pixels, do it. But I will have the same problem. The code in min-width: 290px will also be used for any screen size exceeding 290px.

So, the only solution I can think of will only work for a specific range of the screen, 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 advise me on this?

Looking at the examples, I see the extraction of "redundant" code. Most of the same code repeats, just having different meanings:

 @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 imagine that this will create a lot of code and large CSS files.

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

Can the following be done ?:

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

Answer 1

To get started, you write / link to a bit more code than 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 repeat CSS inside a media query, everything that is set for any screen size, for example, a background color or font family, should be set outside of any media query. This means that it is written only once and applies to everyone. Inside each media request there should be only a code that affects only this specific size. (e.g. width, font size, etc.)

I would not recommend importing css files, etc., just putting it all in one, with global styles at the top and then screen size styles located inside the media queries below it. Don’t postpone large css files, it’s easier / faster to upload one 10KB file than ten 1KB files.

I made an example .css file to show you here . Please note that this will create a terrible site, it is just intended to show you how you can use the layout code and what happens there.

The above example assumes browser support for media queries. Without it, the site will fall on the ass. If you are not 100% sure of support for media queries (and do not use Respond.JS ), I would recommend placing the site on your desktop in global styles, and then rewriting as unnecessary to provide a reserve for non-supporting browsers

Answer 2

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

Altho, to avoid "double" css, you can also create the main css file. Those things that should not be changed on the whole website - no matter what screens - fall into this file. (e.g. your font). Also, your css files will really be “huge” depending on how much you want to go with responsive ones.

Answering your question whether this will be the new standard ... it still depends on the owner of the website if he wants to support mobile sites or not.

I was hoping this helped a bit :) Good luck!