t-comm/lib/responsive/responsive.js

专业、稳定、纯粹的工具库

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

/**
 * 设置 HTML 根元素的响应式字体大小
 * 基于屏幕宽度自动调整根元素的 font-size，实现移动端响应式布局
 * 以 750px 为基准，根元素 font-size = 100 * (屏幕宽度 / 750)
 * @example
 * ```ts
 * // 在应用启动时调用
 * setHtmlResponsiveFontsize();
 * // 屏幕宽度为 375px 时，根元素 font-size = 50px
 * // 屏幕宽度为 750px 时，根元素 font-size = 100px
 * ```
 */
function setHtmlResponsiveFontsize() {
  // 自适应
  (function (win, doc) {
    if (!win.addEventListener) return;
    var html = doc.documentElement;
    function setFont() {
      var cliWidth = html.clientWidth;
      html.style.fontSize = "".concat(100 * (cliWidth / 750), "px");
    }
    win.addEventListener('resize', setFont, false);
    setFont();
  })(window, document);
}

exports.setHtmlResponsiveFontsize = setHtmlResponsiveFontsize;