Question

我使用em表示字体大小。示例：

body {
  font-size:16px;
}
h1 {
  font-size:2em;
}
@media (max-width:860) {
  body {
    font-size:0.8em;
  }
}

由于某种原因，我在Android手机上获得超级小字体。可能是什么导致了这个？我以前没有经历过这个。

截图

Answer 1

em与其直接或最近父级的字体大小有关。如果任何直接父母为font-size属性设置了低/高值，那么它就容易受到剧烈变化的影响。

相反，您应该使用rem （root em ），这相对于<body>元素的字体大小。

为了正确应用font-size媒体资源，您需要确保<head>中有<meta name="viewport" ... >。请注意USING应该是第一个元标记，以便应用于所有设备（如果不是第一个，有些会忽略它。）

Answer 2

由于您em使用font-size值，因此它基于父容器，而不是<body>。相反，您可以使用rem值，代表 root em ，其中 root 是html标记。请尝试以下方法：

CSS

html {
  font-size: 16px;
}
h1 {
  font-size: 2rem;
}
@media (max-width:860) {
  body {
    font-size: 0.8rem;
  }
}

您可以在W3 School了解有关CSS单元的更多信息。

Answer 3

尝试在标题中使用以下标记

＆＃13;

<meta name="HandheldFriendly" content="true"/>
<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=yes">

＆＃13;