因为有的浏览器的最小字体只能识别到12px,就比如说google浏览器,这个时候我们把大小写成它的两倍,然后用transform:scale()的方式缩放回之前的大小就可以解决这个问题
设计稿:
例如:某oppo手机和google浏览器下的效果:
该图标是用iconfont实现的,给的样式如下
i { font-size: .12rem; // 0.12rem = 6px google浏览器和个别安卓机识别不了小于12px的字体大小 line-height: 1.2em; }
改完后google浏览器下的效果:
改完之后的代码:
i { font-size: 0.24rem; // 用它的2倍 line-height: 0.16rem; transform: scale(0.5); // 用transform缩小到原来的样式 }