Question

我正在进行Freecodecamp的响应式Web设计认证中的第一个项目，但文本大小存在问题。

我包括了一些FontAwesome图标作为伪元素，并在span标记中包装了一些日期，以便为它们提供额外的间距。

问题在于，在较小的屏幕尺寸中，日期和图标都会变小，但在其余文本中却不会发生。

我的图标代码为：

collation_connection - utf8mb4_unicode_ci
collation_database - latin1_swedish_ci
collation_server - latin1_swedish_ci

对于日期：

li:before{
    font-size: 40px;
    font-family: "FontAwesome";
    position: absolute;
    left: 0px;
    top: 0px;
}

.bullet-1:before{
    content:"\f0f8";
}

我该如何解决？这是笔：

https://codepen.io/rubenvillarnet/pen/aQzBxV

非常感谢

编辑：非常感谢您的回答。对不起，我对我的解释不够充分。这里有一些澄清：

该问题仅发生在移动设备上或在Chrome的“设备”标签中。如果只是调整浏览器的大小，效果很好。
我尝试使用 vh 单位，但图标和日期仍然比文本其余部分小很多。

Answer 1

更好的方法，可用于字体大小响应结构

html, body { font-size: 5vw }
h1 { font-size: 2em }
h2 { font-size: 1.5em }

Answer 2

您可以使用font-size: 1vw

您可以在此处了解有关视口大小的更多信息：CSS Tricks - Viewport sized

屏幕上的文字变小

2 个答案: