需求
自定义激活 tab
后的样式,这里是需要激活tab
字体变粗,字号变大。
失败的举措
直接改变font
的属性,导致在边界问题上出现了换行或显示完全的情况。
- 失败的效果:
- 默认的效果
失败的原因
tabs
初始化的时候已经确定了单个tab
的大小,直接改变字体大小对于内容比较长的tab
来说可能会超出边界,就出现了上述情况。
最终解决方案
- 最终效果
通过计算激活字体大小与默认字体大小的比值,例如需求默认字号15px
激活tab的字号18px
,那么直接使用scale
CSS3属性放大:
.active {
transform: scale(1.2);
}
小结
实现视觉效果的方案有很多种,尝试不用方案达到最好的兼容效果。