Grow your CSS skills. Land your dream job.

Responsive Web Design

  • # January 31, 2012 at 8:04 am

    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

    # January 31, 2012 at 8:19 am

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

    # January 31, 2012 at 8:22 am

    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)

    # January 31, 2012 at 9:53 am

    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.

    # January 31, 2012 at 10:26 am

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

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".