FAQ

• Why is the size of the component large and how to make responsive adaptation?
  • Rem
  • vh/vw
• Why does the component have no style?
• Why component theme customization does not take effect?
• Why is the page smaller than the mand-mobile components when postcss-pxtorem is configured?

Why is the size of the component large and how to make responsive adaptation?

When the size of the components in the page is very large, please check the elements by right-clicking to confirm whether the element style unit is px. If it is px, it may be caused by the improper or wrong of the adaptation scheme. The component styles in the output package lib directory are specified in px units and are based on the iPhone 6 screen's physical pixel width 750 (2 times the size of the normal "logical pixel" value). This facilitates user customization.

There are two supported adapter schemes:

Rem

The first step, first convert px to rem (the conversion ratio can be determined according to the actual situation), the relevant configuration can refer to Prepare Before Use - Px to Rem

The second step, dynamic adjustment of rem at runtime, can refer to the following code:

(function (window, document) {

  function resize(){
    var ww = window.innerWidth;
    if (ww > window.screen.width) {
      window.requestAnimationFrame(resize);
    }
    else {
      if (ww > 750) ww = 750;
      // The following code is 100px = 1rem according to the proportion, here must change the ratio with 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);

It is also possible to quickly initialize a new project using the official mand-mobile-template. All the above related configurations have been integrated internally.

vh/vw

For some scenarios that do not consider compatibility, you can directly import the code in lib-vw in the output package. The style unit is vh/vw, refer to Release Package Directory.

Why does the component have no style?

First of all, determine the way to introduce the components, the full introduction or on-demand introduction, many of these problems are often caused because the on-demand loading configuration is not effective and did not take effect led to the full introduction of components.

For on-demand introduction, components will automatically load dependencies, but for the full introduction of the need to manually introduce styles, refer to Import。

Why component theme customization does not take effect?

The theme customization scheme is based on stylus, because it is important to ensure that the source code in components is imported, refer to Release Package Directory.

Why is the page smaller than the mand-mobile components when postcss-pxtorem is configured? (postcss-pxtorem configuration problem)

The mand-mobile components (750px, 2x) are inconsistent with the benchmark of the page or other third-party component library (375px, 1x), so the rootVaule of postcss-pxtorem needs to be set to a different value, so in this case it can't be setted in .postcssrc.js, and specific configuration for specific directories in Webpack Rules. See issue#103