FAQ

为什么组件样式很大/如何做响应式适配？

当页面中组件样式很大时，请先右键查看元素，确认元素样式单位是否为px，如果是px，可很有可能是因为适配方案没有做或者不当引起。产出包lib目录中的组件样式以px为单位，并且以iPhone6屏幕 “物理像素” 宽度750为基准 (即普通 “逻辑像素” 值的2倍大小)，这样可以方便使用者自定义适配方案。

支持的适配方案有以下两种：

Rem

第一步，先将px转换成rem（转换比例可根据实际情况而定），相关配置可参考使用前准备 - Px to Rem

第二步，运行时动态调整rem，可参考如下代码：

(function (window, document) {

  function resize(){
    var ww = window.innerWidth;
    if (ww > window.screen.width) {
      window.requestAnimationFrame(resize);
    }
    else {
      if (ww > 750) ww = 750;
      // 下面代码按照比例为100px = 1rem时，此处一定要同pxToRem的转换比例
      document.documentElement.style.fontSize = ww * 100 / 750 + 'px';
    }
  }

  if (document.readyState !== 'loading') {
    resize();
  } else {
    document.addEventListener('DOMContentLoaded', resize);
  }

  window.addEventListener('resize', resize);

})(window, document);

也可使用官方提供的脚手架模板mand-mobile-template快速初始化新项目，内部已集成以上所有相关配置。

vh/vw

对于一些不太考虑兼容的场景，可直接引入产出包中的lib-vw中的代码，样式单位为vh/vw。