单击按钮更改响应式网站的主题 [英] change theme of the responsive website on button click

问题描述

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

I have four type of CSS files so that I can open my website in desktop, mobile and tablet. I have called that CSS pages through javascript function in an external javascript page and called script tag in index page. the code I have written is below but the problem is not that as it works fine. now using this same concept I want to change the theme color of the website which opens in all i.e. mobile, tablet, desktop or any wide screen. So my Real problem is that. Please suggest me with some ideas.

这里是我在.js文件中用于响应站点调用所有CSS的代码

the code is here which I used in .js file for responsive site for calling all 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.我是设计响应式网站的新手，将不胜感激，并且接受所有建议.

now for changing theme color i have to write more css for all css. I am totally new to designing a responsive website, any help will be appreciated and all suggestions will be accepted.

推荐答案

如果要建立响应式网站，我会去

If building a responsive web site, I would go for a fluid layout together with media queries. There should be no need for different css files for different widths then, unless the design changes drastically between the different widths. (Which I think it shouldn't do, since that would probably just confuse users.)

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

In order to change the site's color theme on a button click, I would do something similar to what you are doing now with your css files for different widths.

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

I would extract everything that has to do with colors into its own css file, and name it for example default-theme.css. If I then would like to switch to a dark theme by clicking on a button, I would create a new css file called for example dark-theme.css, and register something like the following function to the button's onclick-event:

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

这篇关于单击按钮更改响应式网站的主题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！