移动端字体小于12px的解决方案

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/besttoby01/article/details/79641069

1.移动端的字体大小最小为12px。

两种解决方案：

第一种，使用

transform: scale(0.7);

css的属性，可以缩放大小。

第二种，使用

display:table;
display: table-cell;

给其套一个父元素，使用table布局方式。也可以解决。

第一种比较简单。第二种就一大堆css样式。

.label-parent {
    display:table;
    height: 40px;
    line-height: 40px;
    border: 1px solid #000;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: 100% 100%;
    transform-origin: 100% 100%;
}
.label {
    display: table-cell;
    vertical-align:middle;
    font-size: 30px;
}