html - 屏幕调整大小时文本变小

Question

我正在 Freecodecamp 的响应式网页设计认证中制作第一个项目，但我遇到了一些文本大小的问题。

我已经包含了一些 FontAwesome 图标作为伪元素，并将一些日期包裹在一个 span 标签中，以便给它们一些额外的间距。

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

我的图标代码是：

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

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

对于日期：

.year{
    display: inline-block;
    margin-right: 20px;
    font-weight: 600;
}

我该如何解决？这是笔：

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

非常感谢

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

• 该问题仅发生在移动设备或 Chrome 的设备选项卡中。如果只是调整浏览器的大小，它会很好地工作。
• 我尝试过使用vh单位，但图标和日期仍然比文本的其余部分小得多。

标签： htmlcss

Answer 1

我们可以将更好的方法用于字体大小响应结构

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