javascript - Dynamically generated style sheet based on the clients parameters

Question

I'm using node.js and I'm wondering if there's a module that would generate custom stylesheets based on clients window size and other paramerers. Those parameters would be used in the stylesheet template by the programer like variables.

I realize that the server might not have that info about the client so if there isn't a serverside solution, is there at least a client side one I could use?

Answer 1

媒体查询将是您追求的更优雅的解决方案。

但是如果你想用纯 js 完成你的任务，试试这个

var parameter_one = "http: //stackoverflow.com/one.css";  //your absolute path
var parameter_two = "http: //stackoverflow.com/two.css";

if (screen.width < 1024) {
    load_me(parameter_one)
} else {
    load_me(parameter_two)
}

function load_me(file) {
    var head = document.getElementsByTagName('head')[0];
    var link = document.createElement('link');
    link.rel = 'stylesheet';
    link.type = 'text/css';
    link.href = file;
    link.media = 'all';
    head.appendChild(link);
}