Best solution/framework to Responsive Design for IE7

Question

For those who still don't know about Responsive Design I suggest this link

As long at it doesn't understand media querys like:

@media screen and (max-width: 1280px)   {
    h1 { font-size: 120px; padding: 10px; color:#999999 !important; }
    h2{font-size:35px;}
}
    
@media screen and (max-width: 1024px)   {
    h1 { font-size: 90px; padding: 1px; color:#999 !important; }
    h2{font-size:25px;}
    
}

@media screen and (max-width: 740px)    {
    h1 { font-size: 70px; padding: 1px; color:#999 !important; }
    h2{font-size:16px;}
    .left-col { width: 100%; }
    .sidebar { width: 100%; }
}

@media screen and (max-width: 480px) {

}

@media screen and (max-width: 478px)    {
    h1 { font-size: 50px; padding: 1px; color:#999; }
    h2 { font-size: 12px; padding: 1px; }
    body { font-size: 13px; }
}

I was considering to use adapt.js which with you can Do:

<script>
// Edit to suit your needs.
var ADAPT_CONFIG = {
  // Where is your CSS?
  path: 'assets/css/',

  // false = Only run once, when page first loads.
  // true = Change on window resize and page tilt.
  dynamic: true,

  // First range entry is the minimum.
  // Last range entry is the maximum.
  // Separate ranges by "to" keyword.
  range: [
    '0px    to 760px  = mobile.min.css',
    '760px  to 980px  = 720.min.css',
    '980px  to 1280px = 960.min.css',
    '1280px to 1600px = 1200.min.css',
    '1600px to 1940px = 1560.min.css',
    '1940px to 2540px = 1920.min.css',
    '2540px           = 2520.min.css'
  ]
};
</script>
<script src="assets/js/adapt.min.js"></script>

It's meant to be used with 960 grid But you can still use whatever you like in those .css

But the problem is that you need JavaScript enabled. I was hoping any of you know a more flexible (responsive!) solution, any?

Answer 1

Just looking into this. I was going to use adapt.js, but I found some JS that enables media query functionality on older browsers (including IE7).

That way newer browsers without JS will still work properly, the only situation where the responsive design will fall back to the smallest version is on

Here are two of the best JS media query fallbacks I have found:

---

Respond

https://github.com/scottjehl/Respond

Respond is around 3kb when compressed and supports the basic media queries that you would need for simple responsive design (min/max-width)

---

css3-mediaqueries-js

http://code.google.com/p/css3-mediaqueries-js/

A bit bigger at <16kb minified. Supports a wider range of media queries (not tested, but it is referenced on the Respond site)

---

Answer 2

I don't know of any way to make a website responsive in IE6-8 without using Javascript. It is, however, possible to just serve a desktop version of your website to these browsers and make it responsive in all other browsers. I believe this is the best approach, since IE6-8 are (almost?) exclusively used on desktops anyway.

Cascade Framework is the only CSS framework I know with a grid system that implements this technique.

See also this demo.

Answer 3

I didn't like the idea of some of the alternatives to make old browsers work with media queries. Loading the CSS file via AJAX and parsing it doesn't sound too efficient to me.

Another option to make responsive websites for IE7 or even IE5/6 is to use JavaScript to apply classes based on screen width, similar to media queries. This works with all browsers as long as JavaScript is enabled. You can have a default resolution which is served if JavaScript is disabled.

This is described here.

Some sample JavaScript to accomplish this:

<script type="text/javascript">
    function hasClass(el, cls) {
        return el.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
    }
    function addClass(el, cls) {
        if (!this.hasClass(el, cls)) el.className += " " + cls;
    }
    function removeClass(el, cls) {
        if (hasClass(el, cls)) {
            var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
            el.className = el.className.replace(reg, ' ');
        }
    }

    var addEvent = function (elem, type, eventHandle) {
        if (elem == null || elem == undefined) return;
        if (elem.addEventListener) {
            elem.addEventListener(type, eventHandle, false);
        } else if (elem.attachEvent) {
            elem.attachEvent("on" + type, eventHandle);
        } else {
            elem["on" + type] = eventHandle;
        }
    };

    function responsive() {
        var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;

        for (var i = 0; i < breakpoints.length; i++) {
            if (breakpoints[i][0] == "max-width") {
                if (w <= breakpoints[i][1]) {
                    addClass(document.getElementById(id), breakpoints[i][2]);
                }
                else {
                    removeClass(document.getElementById(id), breakpoints[i][2]);
                }
            }
            else if (breakpoints[i][0] == "min-width") {
                if (w >= breakpoints[i][1]) {
                    addClass(document.getElementById(id), breakpoints[i][2]);
                }
                else {
                    removeClass(document.getElementById(id), breakpoints[i][2]);
                }
            }
        }
    }

    var resizeTimeoutId;

    function resized() {
        window.clearTimeout(resizeTimeoutId);
        resizeTimeoutId = window.setTimeout('responsive();', 10);
    }

    var id = "body";
    var breakpoints = [["max-width", 630, "max630"], ["min-width", 1890, "min1890"]];

    addEvent(window, "resize", resized);

    responsive();
</script>