动态计算rem

使用 Flexible 实现手淘 H5 页面的终端适配

https://github.com/amfe/lib-flexible

适配

手淘

! function (e, t) {
  var n = t.documentElement,
    d = e.devicePixelRatio || 1;

  function i() {
    var e = n.clientWidth / 3.75;
    n.style.fontSize = e + "px"
  }
  if (function e() {
      t.body ? t.body.style.fontSize = "16px" : t.addEventListener("DOMContentLoaded", e)
    }(), i(), e.addEventListener("resize", i), e.addEventListener("pageshow", function (e) {
      e.persisted && i()
    }), 2 <= d) {
    var o = t.createElement("body"),
      a = t.createElement("div");
    a.style.border = ".5px solid transparent", o.appendChild(a), n.appendChild(o), 1 === a.offsetHeight && n.classList.add("hairlines"), n.removeChild(o)
  }
}(window, document)

网易

html {
    font-size: 13.33333vw
}

@media screen and (max-width: 320px) {
    html {
        font-size:42.667px;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 321px) and (max-width:360px) {
    html {
        font-size:48px;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 361px) and (max-width:375px) {
    html {
        font-size:50px;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 376px) and (max-width:393px) {
    html {
        font-size:52.4px;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 394px) and (max-width:412px) {
    html {
        font-size:54.93px;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 413px) and (max-width:414px) {
    html {
        font-size:55.2px;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 415px) and (max-width:480px) {
    html {
        font-size:64px;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 481px) and (max-width:540px) {
    html {
        font-size:72px;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 541px) and (max-width:640px) {
    html {
        font-size:85.33px;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 641px) and (max-width:720px) {
    html {
        font-size:96px;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 721px) and (max-width:768px) {
    html {
        font-size:102.4px;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 769px) {
    html {
        font-size:102.4px;
        font-size: 13.33333vw
    }
}

动态计算 rem 基准大小

/**
 * 动态计算 rem 基准大小
 */
!(function(doc, win) {
  var docEle = doc.documentElement,
    evt = 'onorientationchange' in window ? 'orientationchange' : 'resize',
    fn = function() {
      var width = docEle.clientWidth
      width && (docEle.style.fontSize = 20 * (width / 320) + 'px')
    }

  win.addEventListener(evt, fn, false)
  doc.addEventListener('DOMContentLoaded', fn, false)
})(document, window)

任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么 12px=0.75em,10px=0.625em。为了简化 font-size 的换算，需要在 css 中的 body 选择器中声明 Font-size=62.5%，这就使 em 值变为 16px*62.5%=10px, 这样 12px=1.2em, 10px=1em, 也就是说只需要将你的原来的 px 数值除以 10，然后换上 em 作为单位就行了。

html {
  font-size: 62.5%; /*10 ÷ 16 × 100% = 62.5%*/
}
body {
  font-size: 1.4rem; /*1.4 × 10px = 14px */
}
h1 {
  font-size: 2.4rem; /*2.4 × 10px = 24px*/
}
p {
  font-size: 14px;
  font-size: 1.4rem;
} /*IE8及之前版本的IE浏览器使用14像素*/

下面列出几种常见设计稿相应的 font-size 值：

deviceWidth = 320，font-size = 320 / 6.4 = 50px
deviceWidth = 375，font-size = 375 / 6.4 = 58.59375px
deviceWidth = 414，font-size = 414 / 6.4 = 64.6875px
deviceWidth = 500，font-size = 500 / 6.4 = 78.125px

也可使用 JS 计算:

;(function() {
  document.addEventListener(
    'DOMContentLoaded',
    function() {
      var html = document.documentElement
      var windowWidth = html.clientWidth
      html.style.fontSize = windowWidth / 6.4 + 'px'
      // 等价于html.style.fontSize = windowWidth / 640 * 100 + 'px';
    },
    false,
  )
})()
// 这个6.4就是根据设计稿的横向宽度来确定的，假如你的设计稿是750
// 那么 html.style.fontSize = windowWidth / 7.5 + 'px';

webapp font-size 解决问题的方案