css - 在每个移动设备上获得正确的字体大小

Question

例如，在我的移动应用程序中，我使用了一种大字体:

<b style="font-size:100px; font-family:Segoe UI">text</b>

当我在手机上测试它时，它看起来不错，但在较小的手机上它的尺寸仍然相同，而且太大了。

我应该使用什么 css 设置才能在每部手机上获得相同的尺寸？

Answer 1

媒体查询将不起作用。是的，您可以根据屏幕大小(像素大小而不是物理大小，因此在具有相同物理大小屏幕但像素密度不同的两个设备上大小不同)设置不同的字体大小。 您的目标是在所有具有相同物理屏幕尺寸的设备上，无论像素密度如何，文本都具有相同的物理尺寸。

现在的手机在手掌大小的屏幕上适合超高清分辨率，而旧手机的像素密度要低得多。

这个问题直到最近才得到解决。最近 CSS3 添加了对他们所谓的“Viewport Sized Typography”的支持。它允许您设置相对于物理屏幕尺寸的事物的尺寸。说明here .