CODEWITHSUNDEEP
javascripthtmlcss
Harshana
Harshana

Reputation: 134

how to load different css files with different screen sizes?

How to load abc.css file when the screen width = 1360px and xyz.css load whenthe screen width = 1600px. How can i do this with javascript?

Upvotes: 0

Views: 170

Answers (3)

JA9
JA9

Reputation: 1778

you can simply specify your width in your link tag i.e:-

<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />

this stylesheet will only take affect when the current browser window is between 701 and 900 pixels in width.

Upvotes: 0

Derek 朕會功夫
Derek 朕會功夫

Reputation: 94319

@import url("abc.css") (width: 1360px);
@import url("xyz.css") (width: 1600px);

@import supports media queries.

Demo: http://jsfiddle.net/DerekL/assz3/

Upvotes: 2

Adrian Enriquez
Adrian Enriquez

Reputation: 8413

From css-tricks

Using javascript/jQuery

HTML

<link rel="stylesheet" type="text/css" href="main.css" />
<link id="size-stylesheet" rel="stylesheet" type="text/css" href="narrow.css" />

jQuery

function adjustStyle(width) {
    width = parseInt(width);
    if (width < 701) {
        $("#size-stylesheet").attr("href", "css/narrow.css");
    } else if ((width >= 701) && (width < 900)) {
        $("#size-stylesheet").attr("href", "css/medium.css");
    } else {
       $("#size-stylesheet").attr("href", "css/wide.css"); 
    }
}

$(function() {
    adjustStyle($(this).width());
    $(window).resize(function() {
        adjustStyle($(this).width());
    });
});

Using Media

HTML

<link rel="stylesheet" media="screen and (min-device-width: 800px)" href="800.css" />

Read More ( CSS-Tricks )

Upvotes: -1

Related Questions