Issue
I have four type of CSS files so that I can open my website in desktop, mobile and tablet. I have called that CSS pages through javascript function in an external javascript page and called script tag in index page. the code I have written is below but the problem is not that as it works fine. now using this same concept I want to change the theme color of the website which opens in all i.e. mobile, tablet, desktop or any wide screen. So my Real problem is that. Please suggest me with some ideas.
the code is here which I used in .js file for responsive site for calling all 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());
});
});
now for changing theme color i have to write more css for all css. I am totally new to designing a responsive website, any help will be appreciated and all suggestions will be accepted.
Solution
If building a responsive web site, I would go for a fluid layout together with media queries. There should be no need for different css files for different widths then, unless the design changes drastically between the different widths. (Which I think it shouldn't do, since that would probably just confuse users.)
In order to change the site's color theme on a button click, I would do something similar to what you are doing now with your css files for different widths.
I would extract everything that has to do with colors into its own css file, and name it for example default-theme.css. If I then would like to switch to a dark theme by clicking on a button, I would create a new css file called for example dark-theme.css, and register something like the following function to the button's onclick-event:
function adjustTheme(width) {
$("#theme-stylesheet").attr("href", "css/dark-theme.css");
}
Answered By - meliasson
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.