Document.write is not working properly with media queries. What can I do - or is there an alternative?

Question

This little function gives me a headache.

document.write in combination with media queries just won't work responsive.

I'm trying to change the css stylesheet with document.write as soon as the max-width changes.

It works, but not responsive - I have to reload the page.

It works perfectly fine with document.body.style.backgroundColor as example - but not with document.write.

Does anyone know why, or is there a better way?

let Swidth = window.matchMedia("(max-width: 700px)")
  function reSize(Swidth) {
    if (Swidth.matches) {
      /* document.body.style.backgroundColor = "yellow"; // This works */
      document.write('<link href="./src/css/variant1.css" type="text/css"  rel="stylesheet">');

    } else {
      
      /* document.body.style.backgroundColor = "blue"; // This works */
      document.write('<link href="./src/css/variant2.css" type="text/css"  rel="stylesheet">')

    }
  }
reSize(Swidth);
Swidth.addEventListener("change", reSize);

Answer 1

This solution works for me.

function addStylesheet(theHref) {
    if (document.createStyleSheet) {
        document.createStyleSheet(theHref);
    } else {
        var newSheet = document.createElement('link');
        newSheet.setAttribute('rel', 'stylesheet');
        newSheet.setAttribute('type', 'text/css');
        newSheet.setAttribute('href', theHref);
        document.getElementsByTagName('head')[0].appendChild(newSheet);
    }
}

let Swidth = window.matchMedia("(max-width: 700px)")

function reSize(Swidth) {
    if (Swidth.matches) {
        document.body.style.backgroundColor = "yellow";
        addStylesheet("./src/css/variant1.css")
    } else {
        document.body.style.backgroundColor = "blue";
        addStylesheet("./src/css/variant2.css")
    }
}
reSize(Swidth);
Swidth.addEventListener("change", reSize);

Answer 2

You can use the media attribute of the <link> element.

<link href="./src/css/variant1.css" type="text/css" 
      rel="stylesheet" media="screen and (max-width: 700px)">
<link href="./src/css/variant2.css" type="text/css"
      rel="stylesheet" media="not screen and (max-width: 700px)">