Responsive Web Design : Apply Different CSS for different resolutions

Responsive Web Design : Apply Different CSS for different resolutions

Continuing on responsive web design. As a reminder I base those tutorials on Video Tutorial from Stone River Learning on Responsive Web Design , very good intro to basics of Responsive Web Design, check it out!

Next logical question after we have figured out what resolutions to use is to find out how to apply different CSS styles for different resolutions.

To apply those you would have to use @media attribute of css, and it would look like this:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

@media screen and (min-width: 320px) {   body {     background-color: red;   } }   @media screen and (min-width: 760px) {   body {     background-color: green;   } }   @media screen and (min-width: 1200px) {   body {     background-color: blue;   } }

What we did here is we set minimum width of the device and are changing background colour (as an example) based on this minimum width.

To see this working, what you could do is to include this stylesheet in your HTML file:

1	<link rel="stylesheet" type="text/css" href="styles.css" >

Then go to your web page in the browser and try playing with browser window resolution (resize window), you would see how background colour changes.

If you still figuring out what resolutions to target, check out this post”

RESPONSIVE WEB DESIGN (PART 1) – WHAT RESOLUTIONS TO TARGET?

If you have any questions or suggestions about next topics, please put that into comments section.

Anatoly