Question

我发现m.taobao.com自动更改正文字体大小，基于设备宽度使用javascript

   (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);

和所有组件的宽度/高度，布局使用rem！一旦我用iphone4s打开这个网站，基本字体大小为：

<html data-dpr="2" style="font-size: 64px; width: 100%; height: 100%; overflow: hidden;">
.icon {
  width: 1.203rem;
  height: 1.203rem;
}

div.icon变得更小而如果我用iphone6打开同样的.icon css但是，icon变大了

<html data-dpr="2" style="font-size: 75px; width: 100%; height: 100%; overflow: hidden;">

另一种方法是使用媒体查询来执行此操作，但需要编写大量的CSS！哪个更好？

响应式移动网络/ webapp设计的更好方式/方法？

0 个答案: