使用vant-tabs改变active-tab样式

需求

自定义激活 tab 后的样式，这里是需要激活tab字体变粗，字号变大。

失败的举措

直接改变font的属性，导致在边界问题上出现了换行或显示完全的情况。

• 失败的效果：
  
• 默认的效果
  

失败的原因

tabs 初始化的时候已经确定了单个tab的大小，直接改变字体大小对于内容比较长的tab来说可能会超出边界，就出现了上述情况。

最终解决方案

• 最终效果
  
  通过计算激活字体大小与默认字体大小的比值，例如需求默认字号15px 激活tab的字号18px，那么直接使用scale CSS3属性放大：

.active {
	transform: scale(1.2);
}

小结

实现视觉效果的方案有很多种，尝试不用方案达到最好的兼容效果。