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 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. With the program.

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 使用前准备 - 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 man-to-mobile template (https://github.com/mand-mobile/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 产出包.

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 引入方式。

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 产出包 with style unit vh/vw .