how to load different css files with different screen sizes?

Question

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?

Answer 1

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

@import supports media queries .

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

Answer 2

you can simply specify your width in your link tag ie:-

<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.

Answer 3

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 )