0

我有四种类型的 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。我对设计响应式网站完全陌生，任何帮助将不胜感激，所有建议都将被接受。

4

3 回答 3

1

如果构建一个响应式网站，我会选择流畅的布局和媒体查询。那么应该不需要针对不同宽度的不同 css 文件，除非设计在不同宽度之间发生巨大变化。（我认为它不应该这样做，因为这可能只会让用户感到困惑。）

为了在单击按钮时更改站点的颜色主题，我会做一些类似于您现在对不同宽度的 css 文件所做的事情。

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

function adjustTheme(width) {
    $("#theme-stylesheet").attr("href", "css/dark-theme.css");
}
于 2013-06-26T08:43:24.107 回答
1

我建议只使用单个 css 文件。因为很难在单独的 css 文件中维护所有内容。您可以使用 css 媒体查询：Css3 Media Query。例子

@media screen and (max-width: 300px) {
body {
    background-color: lightblue;
}

}

于 2015-01-08T01:51:36.650 回答
0 

    <!DOCTYPE html>
    <html lang="en">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" 
    rel="stylesheet">
<!-- purple-theme.css is the default theme. I have maintained 3 more css files, red-theme.css, blue-theme.css and green-theme.css in the same css location -->

    <link rel="stylesheet" href="purple-theme.css" class="change-theme" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> 
    </script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"> 
    </script>
    <script>
    $(document).on('click', ".btn-color-change", function() {
        $(".change-theme").attr("href", this.id + "-theme.css");
    });
    </script>
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    </head>
    <body>
    <div>
        <button id="red" class="btn-color-change">Red theme</button>
        <button id="green" class="btn-color-change">Green theme</button>
        <button id="blue" class="btn-color-change">Blue theme</button>
        <button id="purple" class="btn-color-change">Purple theme</button>
    </div>
    <div class="row">
        <div class="col-md-3 color-theme" style="border:5px solid white">
            Keep looking up… that’s the secret of life. - Charlie Brown</div>
    </div>
    <div class="col-md-3 color-theme" style="border:5px solid white">
        The first step is you have to say that you can. - Will Smith
    </div>
    </div>
    </body>
    </html>

于 2020-05-05T09:08:32.770 回答