解决移动端字体适配两个问题

https://images.unsplash.com/photo-1483985988355-763728e1935b?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb

IOS PT 和 PX 的关系

淘宝美工交付我的设计稿是375(PT)宽度,然后我就去琢磨了一下这个单位。一开始,我通过百度呢,说 PT 是一个绝对单位,一个PT = 1/72英寸,IPHONE6上一个PX等于1/326英寸(可以通过屏幕英寸和像素的 PPI 比如说 326 值得到),然后一个 PT 等于 326/72 = 4个PX。然后我按照这个计算结果来写代码,发现尺寸是设计稿的4倍多(326/72),而实际上设计稿的PT和PX是1比1的关系。

带着这个疑惑,我查到了这个说法,在不同的屏幕上(普通屏幕 vs retina屏幕),CSS像素所呈现的大小(物理尺寸)是一致的,不同的是1个CSS像素所对应的物理像素个数是不一致的。(这篇文章里)。这和我的实验是一致的。

所以IOS的PT其实是他的逻辑像素,任何CSS像素值在IOS上都会被转换成逻辑像素。关键的是这个转换不是用户去做的,而是IOS自动做的转换。你只要写1PX,系统自己转换成逻辑上的1个PT(物理上是多个像素组成)。

基于 Tailwindcss+Umijs 的适配解决方案

开门建山,不管什么形式,都是通过 REM 来解决。REM 的原理是设定一个根节点字体,以这个字号作为基准,其余样式都通过这个字体的倍数来控制大小。在移动适配场景下,我们只要更改根节点字体大小,可以快速的实现字体的缩放。我的习惯是使用 tailwindcss +umijs 来做。具体流程如下。

一、用 Tailwindcss 还原设计稿。假如要还原 375 像素的设计稿,那么就看设计稿的标注,比如一个标题是20PX,你用 tw 的去还原,指定类名为 text-xl = 1.25rem(浏览器默认根节点字体是16PX)。

二、在设计在前端窗体变化的时候,用当前窗体的宽度除以你还原的那个设计稿的长度375,得到一个因子,这个因子乘以 16PX 根节点大小,就可以得到调整后的根节点字体大小。

由于 tw 的类指定的都是 rem,所以这些元素也实现了缩放。umijs 可以把适配代码写在 src/api.tsx下。如下所示

console.log('运行时配置');

window.onload = function () {
  getRem(375, 16);
};

window.onresize = function () {
  getRem(375, 16);
};

function getRem(pwidth: number, prem: number) {
  var html = document.getElementsByTagName('html')[0];
  var oWidth =
    document.body.clientWidth || document.documentElement.clientWidth;
  html.style.fontSize = (oWidth / pwidth) * prem + 'px';
}