Question

I have a website which should have different styles depending on the resolution.

My code so far.

I want to check thewindow.innerWidth as my document is loading and use small.css when the width is smaller than 1024px. Else I want to use large.css.

Any ideas?

Answer 1

Dynamically load the required CSS document via your Javascript code.

Edit: More elaborate source code:

var srcURL;

if(resolution1)
     srcURL = "path/small.css";
else
     srcURL = "path/large.css";

var style = document.createElement("link")
style.setAttribute("rel", "stylesheet")
style.setAttribute("type", "text/css")
style.setAttribute("href", srcURL)

document.getElementByTagName("head")[0].appendChild(style);