问题描述

如下图所示，需要在手机端实现一个上下居中的价格标签，字号 10。

图0

但对于小于 12 号的字体浏览器默认不会显示更小，因为浏览器默认会有个最小的字体大小，在 pc 端通常这个值是 12。

如果非常必要显示更小的字体常规策略会使用 scale 缩放一定的比例来实现，代码如下：

// 缩放字体的样式如下

// 这里的 @rex 是手机端自适应的 rem 单位

font-size: 10 * @rex;

transform-origin: 50% 50%;

transform: scale(0.9);

我们为了兼容多种场景(包含 pc 端)，使用了缩放的方法，部分代码如下：

// dom 结构如下

// 样式如下

.tag{

line-height: 10 * @rex;

padding: 2 * @rex 4 * @rex;

color: #fff;

background-color: #e22929;

border-radius: 10 * @rex;

&-text {

font-size: 10 * @rex;

transform-origin: 50% 50%;

transform: scale(0.9);

font-weight: bold;

}

}

在通过缩放显示更小的文字，在有些手机上不能很完美的上下居中，有些手机会明显看到显示偏上几像素，如下图所示：

图1(iphone 8，14.0)

图2(未设置 block 各种手机下的截图)

定位问题

下表列出了各种尝试结果

序号

手机型号

系统版本

浏览器

结果

1

iphone x

13.6.1

safari

上下间距、大小正常

2

nova 6

10.0

系统浏览器

上下间距、大小正常

3

pc 模拟器

--

chrome

上下间距正常，大小偏大

4

iphone 8

14.0

safari

上下间距偏上，大小偏大

在尝试设置多种方式依然解决不了，后来想试试设置 flex 布局上下居中可行不，竟然可以了，第 3、4 条都可以，除了 4 上下间距还有点偏差(见截图)。

// 设置 flex 的样式

.tag {

display: flex;

align-items: center;

...

}

图3(iphone 8，14.0)

定位到这里基本算是解决了，但为什么会这样呢？设置 flex 后有了哪些差异？再回去看了看 dom 结构发现原来文字是用 span 包裹，设置父元素 flex 后它的布局会变为 block，难道是这里的差异？

以这个 “inline sacle” 关键字搜索下，发现 “Transform的 scale属性不能作用于 inline元素上，例如span”，接着去查看 transform 的定义说明。

Only transformable elements can be transformed. That is, all elements whose layout is governed by the CSS box model except for: non-replaced inline boxes, table-column boxes, and table-column-group boxes.

这里说只有可变换的元素可以设置 transform，除了 inline、table-column、table-column-group 这几个盒模型其它盒模型都可以设置 transform。

解决方法

最终解决方法，通过给 span 上设置 display: block

// 调整后的样式如下

.tag{

line-height: 10 * @rex;

padding: 2 * @rex 4 * @rex;

margin-left: 4 * @rex;

color: #fff;

background-color: #e22929;

border-radius: 10 * @rex;

&-text {

display: block;

font-size: 10 * @rex;

transform-origin: 50% 50%;

transform: scale(0.9);

font-weight: bold;

}

}

结论

通过 transform 缩放实现小号字体的上下居中布局，一定要在 block 元素上设置，记得 transform 设置在 inline 元素不生效。

图4(设置 block 后各浏览器的截图)

上图缩放后有两个问题，1字体过小，2有些机型里上下还是不居中

问题1

关于字体过小问题，上图是在字号 10 的基础上缩小，为了让缩小后显示字号接近 10，这里可以调整缩放样式:

// 调整字号到 12，对应计算缩放比例取 0.83(10/12 = 0.83)

font-size: 12 * @rex;

transform-origin: 50% 50%;

transform: scale(0.83);

问题2

怎么解决字体缩小后，有的手机还是上下居中有点偏差？？？

图5(缩小文字没上下居中)

因为使用自适应单位，@rex 会根据手机实际尺寸计算出不同的值，而不同的手机对奇数以及含有小数像素处理会有差异的，尝试把样式修改如下：

// 弃用自适应单位，使用 px 像素单位，考虑布局小在手机端各尺寸中差距不大

// 注意这里在文字里多了一个 line-height 设置

.tag{

line-height: 10px;

padding: 2px 4 *px;

margin-left: 4 * @rex;

color: #fff;

background-color: #e22929;

border-radius: 10 * @rex;

&-text {

display: block;

font-size: 12px;

line-height: 12px;

transform-origin: 50% 50%;

transform: scale(0.83);

font-weight: bold;

}

}

最终结果见下图，在 android 和 iOS 手机下都能比较好的居中。

7_p_6.png

具体 line-height 和 font-size 在含有小数值上的具体表现留待以后研究。