FAQ 中文

• 为什么组件尺寸很大/如何做响应式适配？
  • Rem
  • vh/vw
• 为什么组件没有样式？
• 为什么组件主题定制没有生效？
• 为什么配置了postcss-pxtorem后，页面除了mand-mobile组件以外的其他部分变小了？（postcss-pxtorem的配置问题）

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

当页面中组件尺寸很大时，请先右键查看元素，确认元素样式单位是否为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，参考产出包中的lib-vw中的代码，样式单位为vh/vw。

为什么组件没有样式？

首先要确定组件的引入方式，全量引入或者按需引入，很多此类问题的出现往往是因为按需加载配置有误而没有生效导致了组件全量引入。

对于按需引入，组件会自动的加载依赖，但是对于全量引入需手动引入样式，参考引入方式。

为什么组件主题定制没有生效？

主题定制方案基于stylus，因为请务必确保引入的是components内的源码，参考产出包。

为什么配置了postcss-pxtorem后，页面除了mand-mobile组件以外的其他部分变小了？（postcss-pxtorem的配置问题）

mand-mobile组件(750px, 2x)与页面或者其他第三方组件库(375px, 1x)的基准不一致，故postcss-pxtorem的rootVaule需要设置不同的值，因此这种情况下不能在.postcssrc.js中统一设置，而需要在Webpack Rules中针对特定的目录进行特定的配置。可参考issue#103