了解CSS中文本大小的怪癖，以实现响应式设计

Question

了解CSS中文本大小的怪癖，以实现响应式设计

3

我正在尝试理解为什么一些文本在屏幕尺寸变小时会变小，而其他看起来相同风格的文本保持不变。我正在尝试制作自己的导航栏，并希望我的文本在屏幕变小时保持相同的大小（就像引导程序导航栏一样），但我似乎无法弄清楚该如何做到。我查看了源代码，但我不知道要使用哪些属性。例如，我有两个几乎相同的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。我想我可以使用它，但是尝试一下似乎会使文本大小随着屏幕大小的减小而变大，所以我仍然不确定。如果您能帮我解决这个问题，我将不胜感激！谢谢。

- Mick412

1

我在CodePen的链接上看不出任何差别，两个链接都有相同的字体“缩小”行为。但我认为文本实际上并没有缩小，看起来只是浏览器缩小以适应视口上的内容。请阅读有关元标记的信息，以配置视口的行为方式：https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag。 - arieljuod

有道理！就像你说的那样，这可能是浏览器缩放导致文本缩小，但我仍然不明白为什么它们在我的两个CodePen中表现不同，我不确定为什么你没有遇到这种情况。以下是我所遇到的情况的截图： https://i.imgur.com/wLLtMYv.png https://i.imgur.com/n1giokY.png虽然我在Firefox上测试了它，两个CodePen的表现都一样... 文字不会缩小。 - Mick412

1

请注意，视口配置的 meta 标签在渲染后移至 body 标签内部。我认为在 codepen 的编辑视图中它不起作用。如果您使用纯 HTML 文件更改视图，您是否看到相同的行为？如果您将视图更改为全屏模式，则完全正常，这只是 codepen 上 Chrome 浏览器中的一些错误导致的。 - arieljuod

是的，它确实是通过在浏览器中打开一个普通的HTML文件来实现的，在此之前我一直在测试它。看起来在Firefox上运行良好，但在Chrome上不行。然而，自从加入了viewport meta标签后，它按照我的预期工作，并且不会出现缩小的情况。非常感谢！ - Mick412

2个回答

阿里云服务器只需要99元/年，新老用户同享，点击查看详情

0

我要告诉你的第一件事是要注意哪些尺寸单位是相对的，哪些是固定的。使用vh来调整文本大小意味着让我的文本大小为屏幕高度的x百分比。因此，当屏幕高度变化时，文本大小也会发生变化。你应该使用一个不与屏幕大小相关的单位。选项包括但不限于像素大小(px)或rem(rem)。 rem是一个相对单位，但它是相对于根(body)字体大小的，并且只有在那个大小改变时才会改变。希望这可以帮助你！

- BugsArePeopleToo

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，

- Mick412 · Accepted Answer

作为我最初的问题评论中arieljuod提到的，将<meta name="viewport" content="width=device-width, initial-scale=1.0"/>放在标签中可以解决我的问题。
现在它更加一致，并且符合我的个人期望，即在屏幕大小改变时不会缩小页面。