手机端wap网站使用rem字体自适应方法,随屏幕大小缩放自适应大小文字

作者：Jasmine - 2018年02月03日

只需要在做的时候引入这个js代码,pc端使用的px代码可以转化成rem;比如240px,在手机端是2.4rem.

(function (doc, win) {
  var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function () {
      var deviceWidth = docEl.clientWidth;
      if (!deviceWidth) return;
      if(deviceWidth > 750) deviceWidth = 750;
      docEl.style.fontSize = deviceWidth / 7.5 + 'px';
    };
  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, recalc, false);
  doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

介绍一个px直接转化成rem的网站:http://www.ofmonkey.com/front/rem ;可以直接复制你在的样式过去转化.如果你有其他更好的方法也可以提出来喔~欢迎打扰

本文作者： Jasmine

本文链接： https://www.jianbaizhan.com/article/593

版权声明：本博客所有文章除特别声明外，均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处！