Let's start at the beginning, what is Responsive CSS ?

It's a method of adapting your website design according to the user's screen.
May it be a Laptop, Smartphone or Tablet, if you want your website to always look good,
you should learn how to use Responsive CSS.

There are a couple of basic methods,
the most important one (in my opinion) is

1
2
@media screen and (max-width:1024px ) {
}

All the CSS that is inside the @media tag is only relevant if the
screen is less than 1024px wide.

You can imagine that if you have a video that you want to show,
That might not be the best thing to present in your homepage when a user
is using his Smartphone, in that case you probably want to show as much relevant information
as possible, seeing as though the user doesn't have much screen to spare.

The second one (and this is already known, but seldom used for responsiveness) is the percent (%) sign.
If you combine max-width with percentage:

1
2
3
4
.wrapper {</p>
<p>max-width:80%;
width:800px;</p>
<p>}</p>

The wrapper would be 800px (and nothing more) if the window is bigger than 1000px (so that 800px is bigger or equal to 80%),
If the window is smaller, it will shrink to fit 80% of the window's width.

There are a couple of more tricks, a simple search in Google should give you a few tips to get started with.

I've recently had the pleasure of working with a responsive Drupal theme while making a quick a mock-up.
I've never (before) had experience with responsive themes that didn't involve JavaScript (had to make a few of them myself... the horror...)
But thanks to CSS3 it's ridiculously easy!