font-size设置大小小于12px时,需要使用transform: scale(numX, numY)属性详解

1. 为啥要使用transform: scale(numX, numY)属性

由于浏览器为了提升用户的浏览体验,设置字体最小为12px,如果继续缩小字体,样式就不会生效,此时就需要使用transform: scale(numX, numY)属性

2.transform: scale(numX, numY)注意事项

1. transform: scale(numX, numY)属性表示缩小盒子的大小,并不是缩小字体,所有只对块级盒子其效果
2. 由于transform: scale(numX, numY)默认居中缩小,所以可以添加transform-origin: 0 0属性,使盒子左上缩小
3. numX, numY表示缩小的倍数,如0.8表示缩小0.8倍
4. transform: scale(numX, numY)缩小后盒子的所占空间并没有缩小,所有如果想要让后面的盒子紧跟着,可以设置margin-right: -num.