25

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

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

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

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

4

6 回答 6

33

媒体查询将不起作用。是的，您可以根据屏幕大小使用不同的字体大小（这是像素​​大小而不是物理大小，因此在具有相同物理大小屏幕但像素密度不同的两台设备上，字体大小不会相同）。您的目标是在具有相同物理屏幕尺寸的所有设备上拥有相同物理尺寸的文本，而不管像素密度如何。

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

直到最近才解决这个问题。最近 CSS3 增加了对他们所谓的“视口大小排版”的支持。它允许您设置相对于物理屏幕大小的事物大小。它在这里解释。

于 2016-02-02T13:39:57.490 回答
25

跨设备具有相同/相似大小的文本是可取的，默认情况下您不会得到。这不是因为较小的设备具有更少或更小的物理像素，而是因为这些设备上发生的缩放是为了不破坏主要为较大桌面屏幕设计的页面。

例如，iPhone 5 的物理像素为 1136x640，但使用 chrome 的开发者工具的设备工具栏，您可能会看到某些元素看起来比这大得多（比如 1300x900）。这是因为浏览器默认应用的缩小比例。在这种情况下，CSS 像素大小将变得比实际像素大小小得多。想象一下在智能手机中看到桌面大小的页面，只是小得多。

如果您不希望这种情况发生，您需要明确告诉浏览器不要乱缩放（在您的页面标题中）：

    <meta name="viewport" content="width=device-width, initial-scale=1">

如果您在设备上看到同样大的文本，您可能有类似的内容，只需将其删除即可在智能手机上看到它更小。

于 2016-06-23T23:14:09.153 回答
17

您应该为不同的设备宽度使用媒体查询。

@media only screen and (max-width: 768px) {
  b {
    font-size: 20px;
  }
}

@media only screen and (max-width: 320px) {
  b {
    font-size: 10px;
  }
}

等等...

于 2013-05-05T18:00:51.143 回答
1

使用@media查询并为不同的分辨率设置不同的字体

例子

@media all and (max-width: 1200px) and (min-width: 800px) {
                    /* Change Resolutions Here */
  b {
    font-size: 12px;
  }
}

良好阅读媒体查询

于 2013-05-05T18:01:20.070 回答
1

我已经开始使用 REM 和 EM 来实现这一点。

我不知道手机浏览器的默认字体大小是根据屏幕大小还是特定于设备而变化。所以我所做的是我使用 vw 和 vh 将 HTML 设置为相对于设备的平均高度和宽度的字体大小，如下所示

HTML{font-size: calc((1vh+1vw)/2)}

通过从这里使用 REM 和 EM，您可以获得更一致的布局和字体大小。

这适用于移动设备，因为它们都倾向于具有相同的纵横比。我建议您更改平板电脑和台式机的实现方式，因为它们的屏幕比例往往完全不同。当然，使用媒体查询来为这些设置单独的样式。

我想说我刚开始使用这种方法，所以很想听听我完全不应该使用它的原因！

于 2021-02-04T13:31:23.630 回答
0

或者，您可以查看https://github.com/modularscale/modularscale-sass

设置大量断点来满足每一个移动设备的需求很快就会变得非常复杂，而且我在模块化规模方面获得了非常好的结果。

此外，如果您想要完全可访问/灵活，则可以在 EM 或 REM 中设置字体大小。

于 2017-04-28T01:22:47.117 回答