CSS Media Queries issue with different 1280 resolutions

Question

I'm trying to create a responsive layout and using CSS media queries to make it fit in various screen resolutions. But when I made created Media Queries for below mentioned resolutions:

/*1280 x 1024*/
/*1280 x 960*/
/*1280 x 800*/
/*1280 x 768*/
/*1280 x 720*/

Being same width, the broswer picks the last "720px" css only

Here is my code:

    /*1280 x 1024*/
 @media screen and (max-width: 1280px) and (max-height: 1024px) and (min-height: 961px) {
    .resolution {
        color:#0000ff;
    }
}
/*1280 x 960*/
 @media screen and (max-width: 1280px) and (max-height: 960px) and (min-height: 801px) {
    .resolution {
        color:#00ff72;
    }
}
/*1280 x 800*/
 @media screen and (max-width: 1280px) and (max-height: 800px) and (min-height: 769px) {
    .resolution {
        color:#1e00ff;
    }
}
/*1280 x 768*/
 @media screen and (max-width: 1280px) and (max-height: 768px) and (min-height: 721px) {
    .resolution {
        color:#ff00f0;
    }
}
/*1280 x 720*/
 @media screen and (max-width: 1280px) and (max-height: 720px) and (min-height:300px) {
    .resolution {
        color:#fffc00;
    }
}

<div class="resolution">Lorem Ipsum</div>

Please suggest!!!

Answer 1

I put your code into a new HTML file and tested it at different resolutions. It seems to be working fine. Here's a screencast: http://screencast.com/t/LdtVNqDDP

Here's a link to the browser addon you see me using in the screencast.