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

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

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

}

Answer 2

如果要建立一个响应式网站，我会选择fluid layout together with media queries。除非设计在不同宽度之间发生剧烈变化，否则不应该为不同宽度的不同css文件。（我认为它不应该这样做，因为这可能会让用户感到困惑。）

为了在点击按钮上更改网站的颜色主题，我会做类似于你现在正在做的事情，你的css文件的宽度不同。

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

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

Answer 3

    <!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>

按钮点击更改响应式网站的主题

3 个答案: