按钮点击更改响应网站的主题
我有四种类型的CSS文件，以便我可以在桌面，移动设备和平板电脑上打开我的网站。 我通过外部javascript页面中的javascript函数调用了CSS页面，并在索引页面中调用了脚本标记。 我写的代码如下，但问题不在于它工作正常。 现在使用相同的概念我想改变网站的主题颜色，在所有网站中打开，包括手机，平板电脑，桌面或任何宽屏幕。 所以我真正的问题是。 请提出一些想法。
我在.js文件中使用的代码用于响应所有css的响应站点
function adjustStyle(width) { width = parseInt(width); if (width = 351) && (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。 我是一个全新的设计响应式网站，任何帮助将不胜感激，所有建议都将被接受。
如果建立一个响应式网站，我会与媒体查询一起进行流畅的布局 。 除非设计在不同宽度之间急剧变化，否则不应该为不同宽度的不同css文件。 （我认为它不应该这样做，因为这可能会让用户感到困惑。）
为了在点击按钮上更改网站的颜色主题，我会做类似于你现在正在做的事情，你的css文件为不同的宽度。
我会将与颜色有关的所有内容提取到自己的css文件中，并将其命名为default-theme.css。 如果我想通过单击按钮切换到黑暗主题，我会创建一个名为dark-theme.css的新css文件，并将以下函数注册到按钮的onclick-event：
function adjustTheme(width) { $("#theme-stylesheet").attr("href", "css/dark-theme.css"); }
我建议只使用单个css文件。 因为很难将所有内容保存在单独的css文件中。 您可以使用相同的css媒体查询： Css3媒体查询 。 例
@media screen and (max-width: 300px) { body { background-color: lightblue; }
}