I am wanting to make my website work on all displays, and I am wanting to know if I need to simply add CSS media queries to the existing stylesheet, or would this require a lot more changes?
So can an existing website which is not responsive, be made responsive with relative ease or would this require a completely new stylesheet?
You don't have to rewrite a whole new style sheet for this... just add some rules to the size specific sheets that tell your site HOW to resize...(based on your original style sheet)
The answer to the original question (at least for older versions of IE) is that media queries in a SINGLE stylesheet do not work and so it is necessary to add the additional stylesheets as detailed in Chris' article. See the 'Browser Support' section.
Following this issue you DO, in fact, have to redeclare all the rules again (as required for the individual resolutions) otherwise they would not apply.
In general, it's best (IMO) to create a stylesheet for the lowest resolution you are going to support and then add rules to the extra stylesheets as the resolution requires.
In that way, you do not clutter your, for instance, mobile.css with rules that won't ever apply.
I am wanting to make my website work on all displays, and I am wanting to know if I need to simply add CSS media queries to the existing stylesheet, or would this require a lot more changes?
So can an existing website which is not responsive, be made responsive with relative ease or would this require a completely new stylesheet?
Thanks,
Ross
http://css-tricks.com/resolution-specific-stylesheets/
Following this issue you DO, in fact, have to redeclare all the rules again (as required for the individual resolutions) otherwise they would not apply.
In general, it's best (IMO) to create a stylesheet for the lowest resolution you are going to support and then add rules to the extra stylesheets as the resolution requires.
In that way, you do not clutter your, for instance, mobile.css with rules that won't ever apply.