Detect screen size with jQuery and apply a CSS style

Question

I searched and found many examples on web, and even here in stackoverflow, but none of them is 100% explained. For those who wants to place a answer with CSS media screen, please don't do that I know about it. But this question is more for IE7+. since it doesn't support "CSS media screen".

This is the example i found:

$(document).ready(function() {

if (screen.width>=800) {
    $("link[rel=stylesheet]:not(:first)").attr({href : "style1.css"});
    } else {
    $("link[rel=stylesheet]:not(:first)").attr({href : "style.css"});
    }
});

I am new to jquery, so how to change this script in case if I have 4 different styles for 4 different screen resolutions.

So I would liek to have something like this:

if screen > 1 && screen < 600
if screen > 601 && screen < 1280
if screen > 1281 && screen < 1600
if screen > 1 1601

Please help me!

Eli · Accepted Answer · 2013-04-07 11:54:49Z

5

You don't need jQuery for this, using CSS3 media queries instead:

@media only screen and (max-width : 600px) {
   /* Styles for 1*/
}

@media only screen and (min-width : 601px) and (max-width : 1280px) {
   /* Styles for 2 */
}

@media only screen and (min-width : 1281px) and (max-width : 1600px) {
   /* Styles for 3 */
}

@media only screen and (min-width : 1601px) {
   /* Styles for 4 */
}

Ok, as @RaduChelariu mention, to support older browser like IE7 you can use a custom plugin to make CSS3 media queries compatible with.

edited Apr 7, 2013 at 11:54

answered Apr 7, 2013 at 11:40

Eli

14.9k5 gold badges61 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

AndrewS Over a year ago

Please before you answer, read question, IE7+ does not support @media

AndrewS Over a year ago

Sorry, RADU explained to me. Pease add "This shiv link" to your answer so that other users will understand this. Thank you

Radu Chelariu · Accepted Answer · 2013-04-07 11:47:23Z

1

Actually, media queries are the answer. Just use this shiv to add media query support to IE7 and 8 and you're good to go. No need for messy javascript.

answered Apr 7, 2013 at 11:47

Radu Chelariu

4462 silver badges11 bronze badges

1 Comment

Radu Chelariu Over a year ago

Glad to have been of help!

Collectives™ on Stack Overflow

Detect screen size with jQuery and apply a CSS style

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related