我试图理解为什么一些文本随着屏幕尺寸变小而变小，而其他看似相同风格的文本保持不变。
我正在尝试创建自己的导航栏，我希望我的文本保持与屏幕变小相同的大小（就像引导程序导航栏一样），但我似乎无法弄清楚如何做到这一点。我检查源，我不明白使用什么属性。
例如，我有两个几乎相同的HTML，但文本大小调整行为有很大的不同，我不知道为什么。
没有样式，这是一个文本的主体，其大小与屏幕尺寸相同：
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</p>
<h2>Resize the browser window to see the effect.</h2>
</body>
如果我删除其中一个段落，甚至只删除h2，随着屏幕尺寸的减小，文本会变小，为什么会这样？
这里有两个代码，显示我正在谈论的行为。如果您使用Chrome的设备工具栏更改屏幕尺寸来测试响应式设计，您会发现这两个不同的代码段显示调整大小的文本的行为方式不同。尽管如此，如果您只调整浏览器本身的大小而不使用Chrome的设备工具栏，它们的行为是否相同？所以也许你可以看到我是如何混淆的： https://codepen.io/mhlroy/pen/oVoyeN https://codepen.io/mhlroy/pen/eXeKxX
这是一个导航栏的例子我试图让文本保持与屏幕尺寸相同的大小，我希望它保持不变，我将使用媒体查询进行必要的调整，并使菜单成为一个汉堡菜单例如：https://codepen.io/mhlroy/pen/OqOEGO
我想要的只是文本保持相同的大小。我见过有人提到使用vh作为font-size。而且我想我可以使用它，但是现在尝试它似乎会使文本大小随着屏幕尺寸的减小而变大，所以我仍然不确定。
如有任何帮助，我们将不胜感激！
谢谢。
正如arieljuod在我最初的问题的评论中提到的那样，在<meta name="viewport" content="width=device-width, initial-scale=1.0"/>中加入head解决了我的问题。
现在它的工作更加一致，正如我个人所期望的那样，当屏幕尺寸发生变化时，不会缩小页面。
我要告诉你的第一件事是要知道哪些尺寸单位是相对的，哪些是固定的。在vh中调整文本大小就是说我的文字是屏幕高度的百分比。当然，当屏幕改变高度时，文本大小会发生变化。您应该使用与屏幕尺寸无关的单位。选项包括但不限于像素大小（px）或rems（rem）。 rem是一个相对单位，但它相对于根（body）字体大小，只有在发生变化时才会发生变化。希望有所帮助！