Responsive Web Design

[rosco]

Hi all,

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

[ernest]

Check this out… (stylesheets based on resolution)
https://css-tricks.com/resolution-specific-stylesheets/

[ernest]

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)

[Paulie_D]

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.

[rosco]

ok thanks for the suggestions I will experiment with the techniques mentioned and see how I get on

[gowebdardy]

You can always make an existing site responsive and that’s why, few points you should keep in mind.
1. The layout
2. Creation of media file
3. Typography
CSS3 has already the media file function and for that, this is quite appropriate for making an existing website design responsive.

[Author]

Posts