gpt4 book ai didi

css - 了解 CSS 中的文本大小怪癖以进行响应式设计

转载 作者:行者123 更新时间:2023-11-28 10:08:21 25 4
gpt4 key购买 nike

我试图理解为什么有些文本会随着屏幕尺寸变小而变小,而其他看似相同样式的文本却保持不变。

我正在尝试制作自己的导航栏,我希望我的文本在屏幕变小时保持相同的大小(就像引导导航栏所做的那样),但我似乎无法弄清楚该怎么做.我检查了来源,但我不明白要使用什么属性。

例如,我有两段几乎相同的 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解决了我的问题。
现在它的工作更加一致,正如我个人所期望的那样,当屏幕尺寸改变时页面不会缩小。

关于css - 了解 CSS 中的文本大小怪癖以进行响应式设计,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55133737/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com