title: Best solution/framework to Responsive Design for IE7
body: <p>For those who still don't know about Responsive Design I suggest <a href="http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/" rel="nofollow noreferrer">this link</a></p>
  <p>As long at it doesn't understand media querys like:</p>
  <pre><code>@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; }
  }
  </code></pre>
  <p>I was considering to use <a href="http://adapt.960.gs/" rel="nofollow noreferrer"><strong>adapt.js</strong></a> which with you can Do:</p>
  <pre><code>&lt;script&gt;
  // 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 &quot;to&quot; 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'
    ]
  };
  &lt;/script&gt;
  &lt;script src=&quot;assets/js/adapt.min.js&quot;&gt;&lt;/script&gt;
  </code></pre>
  <p>It's meant to be used with <a href="http://960.gs/" rel="nofollow noreferrer">960 grid</a> But you can still use whatever you like in those .css</p>
  <p>But the problem is that you need JavaScript enabled. I was hoping any of you know a more flexible (responsive!) solution, any?</p>