CSS Media Queries issue with different 1280 resolutions
13,289
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.
Author by
UID
Updated on June 29, 2022Comments
-
UID almost 2 years
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!!!