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

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

来源

2013-06-26 Php developer

我建议你使用'媒体queries'。它是一个单一的CSS文件，它为不同的分辨率和设备嵌套CSS。 – supersize

是啊为什么你不使用媒体查询？ – raam86

我粘贴的代码工作正常，我的网站是响应网站。一切都很好，但现在当我想添加像改变主题颜色的功能，只需点击颜色按钮，我必须为所有系统写入四个CSS页面，这将打开我的网站和所有颜色。我不知道如何用上面使用的相同功能来做到这一点。这是我真正想要的 –

如果建立一个响应式网站，我会去fluid layout together with media queries。应该不需要针对不同宽度的不同css文件，除非设计在不同宽度之间发生急剧变化。（我认为它不应该这样做，因为这可能只是混淆了用户）。

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

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

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

来源

2013-06-26 08:43:24 meliasson

如果你想浏览器记住访问之间选择的主题，liyakat的答案看起来很有希望，除非你有什么反对cookies。 – meliasson

是的我接受这个答案你的答案是正确的，但我已经尝试过，但它不适合我。有没有其他的选择，你可以告诉我，因为你已经理解我的问题 –

好吧我使用媒体查询，你可以告诉我它是如何工作的Internet Explorer，因为它不工作在我的情况，但它的铬和火狐工作 –

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

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

}

来源

2015-01-08 01:51:36 user2627846

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

回答

相关问题