在我的移动应用中，我使用了一些大字体，例如：
<b style="font-size:100px; font-family:Segoe UI">text</b>
当我在手机上测试时，它看起来很棒，但在较小的手机上它仍然是相同的尺寸，但它太大了。
我应该使用什么 css 设置在每部手机上获得相同的尺寸？
【问题讨论】：
媒体查询不起作用。是的，您可以根据屏幕大小使用不同的字体大小（这是像素大小而不是物理大小，因此在具有相同物理大小屏幕但像素密度不同的两台设备上，字体大小不会相同）。 您的目标是在具有相同物理屏幕尺寸的所有设备上拥有相同物理尺寸的文本，而不管像素密度如何。
如今的手机在手掌大小的屏幕上配备超高清分辨率，而旧手机的像素密度要低得多。
直到最近才解决这个问题。最近 CSS3 增加了对他们所谓的“视口大小排版”的支持。它允许您设置相对于物理屏幕大小的事物的大小。这是解释here。
【讨论】：
vh 和vw 驱动的排版也可以在横向和纵向之间切换时更改文本大小。 vh（或vmin）在向下滚动时可能会在某些移动浏览器（ios chrome）中发生变化，因为工具栏+url 框滚动关闭。
在不同设备上使用相同/相似大小的文本是可取的，默认情况下您不会这样做。这不是因为较小的设备具有更少或更小的物理像素，而是因为这些设备上发生的缩放是为了不破坏主要为较大桌面屏幕设计的页面。
例如，iPhone 5 的物理像素为 1136x640，但使用 chrome 的开发人员工具的设备工具栏，您可能会看到某些元素看起来比这大得多（比如 1300x900）。这是因为浏览器默认应用的缩小比例。在这种情况下，CSS 像素大小将变得比实际像素大小小得多。想象一下在智能手机中看到桌面大小的页面，只是小得多。
如果您不希望这种情况发生，您需要明确告诉浏览器不要乱缩放（在您的页面标题中）：
<meta name="viewport" content="width=device-width, initial-scale=1">
如果您在不同设备上看到同样大的文本，您可能有类似的内容，只需将其删除即可在智能手机上看到它更小。
【讨论】：
, initial-scale=1 的解决方案。如果您确保在您的body 中直接有一个带有width:980px; margin:0 auto; 的div 和在您的<meta name='viewport' content='width=device-width'> 中的head，它将为您节省大量工作。非常感谢。
div 应该如何提供帮助吗？为什么980px？
您应该针对不同的设备宽度使用媒体查询。
@media only screen and (max-width: 768px) {
b {
font-size: 20px;
}
}
@media only screen and (max-width: 320px) {
b {
font-size: 10px;
}
}
等等……
【讨论】：
使用@media查询，为不同的分辨率设置不同的字体
例子
@media all and (max-width: 1200px) and (min-width: 800px) {
/* Change Resolutions Here */
b {
font-size: 12px;
}
}
【讨论】：
我已经开始使用 REM 和 EM 来实现这一点。
我不知道手机浏览器的默认字体大小是根据屏幕大小变化还是特定于设备。所以我所做的是我使用 vw 和 vh 将 HTML 设置为相对于设备的平均高度和宽度的字体大小，就像这样
HTML{font-size: calc((1vh+1vw)/2)}
通过使用此处的 REM 和 EM，您可以获得更一致的布局和字体大小。
这适用于移动设备，因为它们都倾向于具有相同的纵横比。我建议更改平板电脑和台式机的实现方式，因为它们的屏幕比例往往完全不同。当然，使用媒体查询为这些设置单独的样式。
我想说我刚开始使用这种方法，所以很想听听我完全不应该使用它的原因！
【讨论】：
或者，您可以查看https://github.com/modularscale/modularscale-sass
设置大量断点来满足每一个移动设备的需求很快就会变得非常复杂，而我在模块化规模方面获得了非常好的结果。
此外，如果您想要完全可访问/灵活，则可以在 EM 或 REM 中设置字体大小。
【讨论】：