移动端之js控制rem，适配字体

Posted 2020-09-01

方法一：设置fontsize 按照iphone 5的适配  1em=10px    适配320

// “()()”表示自执行函数
(function (doc, win) {
  var docEl = doc.documentElement,
    // 手机旋转事件,大部分手机浏览器都支持 onorientationchange 如果不支持，可以使用原始的 resize
      resizeEvt = ‘orientationchange‘ in window ? ‘orientationchange‘ : ‘resize‘,
      recalc = function () {
        //clientWidth: 获取对象可见内容的宽度，不包括滚动条，不包括边框
        var clientWidth = docEl.clientWidth;
        if (!clientWidth) return;
        docEl.style.fontSize = 10*(clientWidth / 320) + ‘px‘;
      };
 
  recalc();
  //判断是否支持监听事件 ，不支持则停止
  if (!doc.addEventListener) return;
  //注册翻转事件
  win.addEventListener(resizeEvt, recalc, false);
 
})(document, window);

方法二：按照iPhone6的尺寸设计    是375/25=15px

(function (docs, win) {
  var docEls = docs.documentElement,
  resizeEvts = ‘orientationchange‘ in window ? ‘orientationchange‘ : ‘resize‘,
  recalcs = function () {

  //getBoundingClientRect()这个方法返回一个矩形对象

  window.rem = docEls.getBoundingClientRect().width/25;
  docEls.style.fontSize = window.rem + ‘px‘;

};
  recalcs();
  if (!docs.addEventListener) return;
  win.addEventListener(resizeEvts, recalcs, false);
})(document, window);

方式三：采用media

1 html {
 2     font - size: 20 px;
 3 }
 4 @media only screen and(min - width: 401 px) {
 5     html {
 6         font - size: 25 px!important;
 7     }
 8 }
 9 @media only screen and(min - width: 428 px) {
10     html {
11         font - size: 26.75 px!important;
12     }
13 }
14 @media only screen and(min - width: 481 px) {
15     html {
16         font - size: 30 px!important;
17     }
18 }
19 @media only screen and(min - width: 569 px) {
20     html {
21         font - size: 35 px!important;
22     }
23 }
24 @media only screen and(min - width: 641 px) {
25     html {
26         font - size: 40 px!important;
27     }
28 }
复制代码

推荐使用的 js方式设置