理解CSS中用于响应式设计的文本大小调整

Question

我试图理解为什么一些文本随着屏幕尺寸变小而变小，而其他看似相同风格的文本保持不变。

我正在尝试创建自己的导航栏，我希望我的文本保持与屏幕变小相同的大小（就像引导程序导航栏一样），但我似乎无法弄清楚如何做到这一点。 我检查源，我不明白使用什么属性。

例如，我有两个几乎相同的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 。 而且我想我可以使用它，但是现在尝试它似乎会使文本大小随着屏幕尺寸的减小而变大，所以我仍然不确定。

如有任何帮助，我们将不胜感激！

谢谢。

Answer 1

正如arieljuod在我的最初的问题的评论中提到，投入<meta name="viewport" content="width=device-width, initial-scale=1.0"/>在head固定我的问题。
现在它的工作更加一致，正如我个人所期望的那样，当屏幕尺寸发生变化时，不会缩小页面。

Answer 2

我要告诉你的第一件事是要知道哪些尺寸单位是相对的，哪些是固定的。 在vh调整文本大小就是说我的文字是屏幕高度的百分比。 当然，当屏幕改变高度时，文本大小会发生变化。 您应该使用与屏幕尺寸无关的单位。 选项包括但不限于像素大小（ px ）或rems（ rem ）。 rem是一个相对单位，但它相对于根（ body ）字体大小，只有在更改时才会更改。 希望有所帮助！

理解CSS中用于响应式设计的文本大小调整

问题描述

2 个解决方案

解决方案1
1 2019-03-14 03:34:19

解决方案2
0 2019-03-13 03:16:08

理解CSS中用于响应式设计的文本大小调整

问题描述

2 个解决方案

解决方案1 1 2019-03-14 03:34:19

解决方案2 0 2019-03-13 03:16:08

解决方案1
1 2019-03-14 03:34:19

解决方案2
0 2019-03-13 03:16:08