Regarding the problem that the "postcss-pxtorem" plug-in cannot automatically convert the icon component in the mobile terminal vant into rem

1. When we write mobile projects, we will use the postcss-pxtorem plug-in to automatically convert px to rem, making our project responsive.

2. But when we use the icon component in the vant component library, we will find that when we switch different screen sizes, the icon size does not fit the screen, as follows:

vant original code

 <van-icon name="search" size="12px" color="#fff" /> //没有换成rem

Under the iPhone6 ​​model:

 Under iPad models:

 3. So we found that the icon is not suitable. The reason is that the postcss-pxtorem plug-in can only translate (px automatically converts to rem) the css style code in the style. The inline style in the label cannot convert px to rem, and we The size="12px" is written inline, so it cannot be automatically converted to rem. You need to manually calculate the value of rem.

4. Solution: Divide the size of the font-size in the inline format by the size of the html root (the HTML size here is 37.5), so 12/37.5=0.48rem, the modification is as follows:

 <van-icon name="search" size="0.48rem" color="#fff" />

5. This solves the problem that the size of the icon component cannot be adapted.