Use vant-tabs to change the active-tab style

need

Customize the style tabafter . Here, tabthe font needs to be activated to become bolder and the font size larger.

failed initiatives

Directly changed fontattributes lead to line breaks or complete display on border issues.

• The effect of failure:
  
• default effect
  

reason of failure

tabsA single size has been determined during initialization tab, and directly changing the font size may exceed the boundary for relatively long content tab, and the above situation occurs.

final solution

• The final effect
  
  By calculating the ratio of the active font size to the default font size, for example, the default font size is required to 15pxactivate the tab font size 18px, then directly use scaleCSS3 properties to enlarge:

.active {
	transform: scale(1.2);
}

summary

There are many solutions to achieve visual effects, try not to use the solution to achieve the best compatible effect.