[theAbsolute]

This is jut a little tutorial for responsive CSS, nothing advanced. But I noticed lack of these tuts here, so I guess some of you will find this useful.

Responsive web design is simply design which adjusts to all screen resolutions. So instead of creating design for each device type (Desktop PC, laptop, tablet, iPad, mobile...), it allows just to make only one CSS for all these devices.

IMAGES AND DIVS

First what we want to deal with are images.
There are several ways to do this, but I'll show you the simplest one.

Code

img {
max-width: 100%;
height: auto !important;
}

If you just use that piece of CSS for your images, they will scale with your browser without problems. Simple right?

Keep in mind that if you have fixed width DIV around the image, it won't work. So what we are going to do is to make DIV responsive too.

If we would have this HTML:

Code

<div id="img-wrapper">
<img src="image1.jpg">
</div>

and CSS:

Code

#img-wrapper {
   width: 500px;
}

as I said it won't work. But what we can do here is:

Code

#img-wrapper {
   max-width: 500px;
   width:100%;
}

This way we are telling our div to be 100% of the browser window size until it reaches 500px width.

TEXT

Again, there are several ways to workout text problems in responsive desgin. CSS3 brought us one interesting font-size attribute.

Instead of using px, or em, we can now use viewports.

Example:

Code

font-size:4 vw;

Test it and play with it to see how it works. Also do some more googling about this to see all features.

MEDIA SCREEN

Now this is very useful thing, which allows us to make CSS for specific web page dimensions and again, inside our existing CSS file.

For example, if we want to have different elements properties when window size is less then 600px, we could simply write this:

Code

@media screen and (max-width: 600px) {
  //our CSS changes here
}

Then we can do it again if we want. For example we want more different design for mobile devices:

Code

@media screen and (max-width: 320px) {
  // again our CSS here.
}

That's pretty much it I planned to write in this short tutorial. Maybe I will write some more advanced one. If you have questions be free to ask, I will try to help you.

[Verilog]

Very very nice tutorial, i will say good work on this :)

[90210]

Thanks for the tutorial! I'm sure it will be very helpful!

[ObscureCoder]

I may be only one here that does this but when I reference divs in CSS I type:

Code

div#name {

}

Because it's more compliant.