Is it bad to use prefixed id tags rather than media querys for responsive websites? [closed]

Question

Closed. This question is opinion-based. It is not currently accepting answers.

---

Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.

Closed 8 years ago.

Improve this question

So basically I started programming a website responsively using media queries at my clients request, when surprisingly my client tells me that the website must be responsive in IE7?!?!?! So I developed a jQuery plugin that allows you to plugin your break points then appends a class or id to the body signifying which device is being used. Here is the plugin code:

( function ( $ ) {

    $.fn.windowDimensions = function( options ) {

        var config = $.extend({
            attr                :           'id',
            largeDesktop        :           1600,
            smallDesktop        :           1024,
            tablet              :           768,
            largePhone          :           640,
            smallPhone          :           480,
            smallPhoneName      :           'smallPhone',
            largePhoneName      :           'largePhone',
            tabletName          :           'tablet',
            smallDesktopName    :           'smallDesktop',
            largeDesktopName    :           'largeDesktop'
        }, options );

        var w = 0, className = '';

        $( this ).on('resize ready', function() {

            w = $( this ).width();

            if( w <= config.smallPhone ) {
                className = config.smallPhoneName;
            } else if( w <= config.largePhone && w > config.smallPhone ) {
                className = config.largePhoneName;
            } else if( w <= config.tablet && w > config.largePhone ) {
                className = config.tabletName;
            } else if( w <= config.smallDesktop && w > config.tablet ) {
                className = config.smallDesktopName;
            } else {
                className = config.largeDesktopName;
            }

            $('body').attr( config.attr, className );
        }); 

    };

}) ( jQuery );

So essentially if you leave the defaults the way they are and just instantiate the plugin, it would apply an id="tablet" to the body tag on an ipad. From there I use css to style the element that would look something like this:

.wrap { ... }
#tablet .wrap { ... }
#largPhone .wrap { ... }
#smallPhone .wrap { ... }

I know this probably isn't the best nor a conventional way of doing things but I don't know of any other way of doing this thats better. Is there a better way to approach this or a more optimal solution?

Answer 1

Use this js for ie7 media query support https://code.google.com/p/css3-mediaqueries-js/ and include this in the head tag, More info here http://cssmatter.com/blog/ie7-and-ie8-support-for-css3-media-query/
or you can this one(respond.js) https://github.com/scottjehl/Respond