Responsive Web Design : Apply Different CSS for different resolutions

Change css depending on resolution

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:

@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:

<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.

Responsive Web Design | Change css depending on resolution

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


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



Thanks for installing the Bottom of every post plugin by Corey Salzano. Contact me if you need custom WordPress plugins or website design.

Anatoly Spektor

IT Consultant with 6 years experience in Software Development and IT Leadership. Participated in such projects as Eclipse IDE, Big Blue Button, Toronto 2015 Panam Games.

Join the Discussion

Your email address will not be published. Required fields are marked *