按鈕點擊更改響應網站的主題

我有四種類型的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

按鈕點擊更改響應網站的主題

回答

相關問題