title: a better way/approach for responsive mobile web/webapp design?
body: <p>I have found m.taobao.com automatic change body font-size, base on device width using javascript</p>
  
  <pre><code>   (function (doc, win) {
      var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
          var clientWidth = docEl.clientWidth;
          if (!clientWidth) return;
          var dpr = window.devicePixelRatio;
          docEl.style.fontSize = (dpr / 2 ) * 100 * (clientWidth  / 360) + 'px';
        };
      if (!doc.addEventListener) return;
      win.addEventListener(resizeEvt, recalc, false);
      doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
  </code></pre>
  
  <p>and all components width/height, layout using rem!
  once i open this site with iphone4s the base font-size is:</p>
  
  <pre><code>&lt;html data-dpr="2" style="font-size: 64px; width: 100%; height: 100%; overflow: hidden;"&gt;
  .icon {
    width: 1.203rem;
    height: 1.203rem;
  }
  </code></pre>
  
  <p>div.icon get smaller while if i open with iphone6 same .icon css but, icon get bigger</p>
  
  <pre><code>&lt;html data-dpr="2" style="font-size: 75px; width: 100%; height: 100%; overflow: hidden;"&gt;
  </code></pre>
  
  <p>another way is using media query to do this, but need to write lots of css!
  which one is better?</p>