javascript - 单击按钮更改响应式网站的主题

Question

我有四种类型的 CSS 文件，这样我就可以在台式机、手机和平板电脑上打开我的网站。我已经通过外部 javascript 页面中的 javascript 函数调用了 CSS 页面，并在索引页面中调用了脚本标签。 我写的代码在下面，但问题不在于它工作正常。现在使用相同的概念，我想更改在所有设备(即手机、平板电脑、台式机或任何宽屏)中打开的网站的主题颜色。所以我真正的问题是。请给我一些建议。

代码在这里，我在 .js 文件中用于响应站点以调用所有 css

function adjustStyle(width) {
    width = parseInt(width);
    if (width < 350) {
        $("#size-stylesheet").attr("href", "css/mobile.css");
        } else if ((width >= 351) && (width < 600)) {
        $("#size-stylesheet").attr("href", "css/narrow.css");
    } else if ((width >= 601) && (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());
    });
});

现在要更改主题颜色，我必须为所有 CSS 编写更多的 CSS。我对设计响应式网站完全陌生，我们将不胜感激并接受所有建议。

Answer 1

如果构建响应式网站，我会选择 fluid layout together with media queries .那么应该不需要不同宽度的不同 css 文件，除非设计在不同宽度之间发生巨大变化。 (我认为它不应该这样做，因为这可能只会让用户感到困惑。)

为了在单击按钮时更改网站的颜色主题，我将对不同宽度的 css 文件执行与您现在正在执行的操作类似的操作。

我会将与颜色有关的所有内容提取到它自己的 css 文件中，并将其命名为例如 default-theme.css。如果我想通过单击按钮切换到深色主题，我将创建一个名为 dark-theme.css 的新 css 文件，并将类似以下函数的内容注册到按钮的 onclick 事件中:

function adjustTheme(width) {
    $("#theme-stylesheet").attr("href", "css/dark-theme.css");
}