load css via javascript according to screen resolution

Question

Statement: Making my website Responsive.

What I have done so far: I've tried using @media queries, making external css pages according to resolution.

Problem: I made 5 style sheets; 1024.css, 1280.css, 1366.css, 1440.css, 1920.css . All seem to work fine except the 1024.css! When I load the website in 1024 resolution it automatically turns to mobile-type site. The nav turns into a button, all the elements get dislocated.

What I'm looking for?: I want to load the css style sheets thru javascript. For e.g; I want to be able to load 1280.css when the screen's resolution is 1024px .

I'm a beginner at js. So I can't make advanced functions.

But so far I've prepared this algorithm:

If (max-width = 1024px){replace style.css with 1280.css}

If (max-width = 1366px){replace style.css with 1366.css}

If (max-width = 1440px){replace style.css with 1440.css}

If (max-width = 1920px){replace style.css with 1920.css}

Else if (max-width = 1280px){replace style.css with 1280.css}

PS:I've Searched Google and Stackoverflow and found nothing.

UPDATE: I tried what you said Abhishek Pandey but here is the result . you can check it on http://shalepizza.tk/ Im currently working on the index page.

To check the appropriate resolution, when the page is loaded, press F12 and Ctrl+Shift+M

I link my CSS like this : <link href="/static/1024.css" rel="stylesheet" type="text/css" />

Your current approach is the correct one. You'd be better off finding out why it's not working as expected. — Reinstate Monica Cellio
– Reinstate Monica Cellio, Commented Sep 5, 2016 at 10:36
why use js - why not use media queries? It's unclear what went wrong when you say you've tried that — Pete
– Pete, Commented Sep 5, 2016 at 10:38
You can load all your css and the media queries will do the job. Loading the main css in js is generaly not an efficient way (inconsistent delay, ..) — aprovent
– aprovent, Commented Sep 5, 2016 at 10:47
I'd suggest you to share the relevant parts of the code that's not working (how you include your CSS and may be CSS itself and a link to the result page), probably we can help with fixing them. But anyway, you should specify what are you asking about. — YakovL
– YakovL, Commented Sep 5, 2016 at 10:48

Abhishek Pandey · Accepted Answer · 2016-09-05 10:53:26Z

4

You can use html instead of js

<link href="/static/1024.css" media="screen and (max-width:1024px)" rel="stylesheet"  type="text/css" />
<link href="/static/1366.css" media="screen and (max-width:1366px)" rel="stylesheet" type="text/css" />

or best option is to use @media queries in css file

/* min size style*/
@media screen and (max-width:320px) {
   /* put your css style in there */
}

/* middle size style */
@media screen and (min-width:321px) {
   /* put your css style in there */
}

/* large size style */
@media screen and (min-width:800px) {
   /* put your css style in there */
}

edited Sep 5, 2016 at 10:53

answered Sep 5, 2016 at 10:38

Abhishek Pandey

13.6k8 gold badges41 silver badges72 bronze badges

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

Comments

Pascal Boschma · Accepted Answer · 2016-09-05 11:08:57Z

0

May I ask you why you want to use Javascript for that? HTML Has something called Media Queries (Rule: @media), and with that you can specify which CSS it needs to run by a specific size.

A Media query starts with @media. To tell the code that's about the Screen Port, use screen. Finish off with and (min-width:1024px){ and enter your CSS there.

For Example. This is your style.css;

@media screen and (min-width:1024px){
  background-color:#0f0f1f;
}

@media screen and (min-width:2411px){
  background-color:000000;
}

Don't include other css files like this. When you want to do that, you can give the Media attribute in your CSS include.

 media="screen and (min-width:1024px)"

answered Sep 5, 2016 at 11:08

Pascal Boschma

1971 silver badge14 bronze badges

Comments

Simanto Ahsan Asif · Accepted Answer · 2016-09-05 12:11:10Z

0

<body  onresize="myFunction()">
function myFunction() {
            var width = window.outerWidth;
            if (width < 960){
                $('link[href="style1.css"]').attr('href','style2.css');
            }else{
                $('link[href="style2.css"]').attr('href','style1.css');
            }
        }

edited Sep 5, 2016 at 12:11

answered Sep 5, 2016 at 11:39

Simanto Ahsan Asif

11 bronze badge

Collectives™ on Stack Overflow

load css via javascript according to screen resolution

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related