Change Css 'href' by javascript by browser size change

Question

Been trying to apply a javascript that will change the Css href if the browser window or device is a different size. I have scoured here and tested all of them with no results. here is my code so far. AND YES I TRIED MEDIA QUERIES AND THEY DON'T WORK

media queries i tried to use:

<link rel="stylesheet" type="text/css" media="screen and (min-width: 900px)"      href="css/main.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 701px) and (max-width: 899px)" href="css/medium.css" />
<link rel="stylesheet" type="text/css" media="screen and (max-width: 700px)" href="css/narrow.css" />

the css links:

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

the entire javascript:

<script type="text/javascript" >  
    function changeImage(a) {
        document.getElementById("img").src=a;
    }

    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());
        });
    });

</script>

Why not use [Media Queries](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries)? WAY easier than this. — APAD1, Jun 12 '14 at 21:11
[CSS Media Queries](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries) [CSS media queries for screen sizes](http://stackoverflow.com/questions/13847755/css-media-queries-for-screen-sizes) — Kyle Falconer, Jun 12 '14 at 21:11
You might want to post the media queries you tried to use (yes, I read the comments and the YELLING IN THE QUESTION). Unless most of the web is hallucinating, they *do* work, and are exactly the right tool for this job. — Paul Roub, Jun 12 '14 at 21:23
So the thousands of websites that are using media queries today are just not working? What do you mean they don't work? Of course they do. You are doing something wrong. Show us how you tried to use media queries. — HaukurHaf, Jun 12 '14 at 21:24
I've used Media Queries on every single project I've been a part of for the last 2 years. They work. Must be a PEBKAC issue. — APAD1, Jun 12 '14 at 21:25
Maybe take a look at this question: http://stackoverflow.com/questions/5680657/adding-css-file-with-jquery Also, do not be discouraged by the trolling above. Improve your question and hopefully someone will help :) — Michael Freake, Jun 12 '14 at 21:36
@user3541459 What browsers and versions are you trying to support? If you're also targeting older browsers that [don't support media queries](http://caniuse.com/#feat=css-mediaqueries), there are [polyfills available](http://html5please.com/#queries) to help. — Jonathan Lonowski, Jun 12 '14 at 21:39

score 0 · Answer 1 · answered Jun 12 '14 at 21:38

To react on screen sizes in JS you could use matchMedia() with media queries.

var stylesheet = $("#size-stylesheet");

if (window.matchMedia("(max-width: 700px)").matches) {

    stylesheet.attr("href", "css/narrow.css");

} else if (window.matchMedia("(min-width: 701px) and (max-width: 900px)").matches) {

    stylesheet.attr("href", "css/medium.css");

} else {

    stylesheet.attr("href", "css/wide.css"); 
}

Change Css 'href' by javascript by browser size change

1 Answers1