理解CSS中用于响应式设计的文本大小调整
[英]Understanding text sizing quirks in CSS for responsive design
问题描述
I'm trying to understand why some texts gets smaller as the screen size gets smaller and other texts with seemingly same style stays the same. 
我试图理解为什么一些文本随着屏幕尺寸变小而变小，而其他看似相同风格的文本保持不变。
I am trying to make my own navigation bar, and I want my text to stay the same size as the screen gets smaller (like how a bootstrap navbar does), but I can't seem to figure out how to do it. 我正在尝试创建自己的导航栏，我希望我的文本保持与屏幕变小相同的大小（就像引导程序导航栏一样），但我似乎无法弄清楚如何做到这一点。 I check the source and I don't understand what attributes to use. 我检查源，我不明白使用什么属性。
For example, I have two pieces of HTML that are almost the same, but the text sizing behavior is vastly different and I have no idea why. 例如，我有两个几乎相同的HTML，但文本大小调整行为有很大的不同，我不知道为什么。
With no styles, here's a body with text that stays the same size as the screen size decreases: 没有样式，这是一个文本的主体，其大小与屏幕尺寸相同：
<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>
If I remove one of the paragraphs, or even just the h2 , the text now becomes smaller as the screen size decreases, why is that? 如果我删除其中一个段落，或者甚至只删除h2 ，那么随着屏幕尺寸的减小，文本会变小，为什么会这样？
Here are two codepens that shows the behavior I'm talking about. 这里有两个代码，显示我正在谈论的行为。 If you change the screen size using Chrome's device toolbar to test responsive design, you see that these two differents pieces of code shows text resizing to be behaving differently. 如果您使用Chrome的设备工具栏更改屏幕尺寸来测试响应式设计，您会发现这两个不同的代码段显示调整大小的文本的行为方式不同。 Altough, if you only resize the browser itself and not use the Chrome's device toolbar, they behave the same? 尽管如此，如果您只调整浏览器本身的大小而不使用Chrome的设备工具栏，它们的行为是否相同？ So maybe you can see how I'm getting confused: 所以也许你可以看到我是如何混淆的：
https://codepen.io/mhlroy/pen/oVoyeN https://codepen.io/mhlroy/pen/oVoyeN
https://codepen.io/mhlroy/pen/eXeKxX https://codepen.io/mhlroy/pen/eXeKxX
Here's an example of a navigation bar I'm trying to have the text stay the same size as the screen size decreases, I want it to stay the same and I'll make the necessary adjustments myself with media queries and make the menu become an hamburger menu for example: https://codepen.io/mhlroy/pen/OqOEGO 这是一个导航栏的例子我试图让文本保持与屏幕尺寸相同的大小，我希望它保持不变，我将使用媒体查询进行必要的调整，并使菜单成为一个汉堡菜单例如： https ： //codepen.io/mhlroy/pen/OqOEGO
All I want is for the text to stay the same size. 我想要的只是文本保持相同的大小。 I've seen some people mention using vh for the font-size . 我见过有人提到使用vh作为font-size 。 And I suppose I could use that, but trying it right now seems to make the text size go bigger as the screen size decreases, so I'm still not sure. 而且我想我可以使用它，但是现在尝试它似乎会使文本大小随着屏幕尺寸的减小而变大，所以我仍然不确定。
Any help shedding some light on this will be greatly appreciated! 如有任何帮助，我们将不胜感激！
Thank you. 谢谢。
2 个解决方案
解决方案1
1 2019-03-14 03:34:19
As arieljuod mentioned in the comments of my initial question, putting in <meta name="viewport" content="width=device-width, initial-scale=1.0"/> in the head fixes my issue. 正如arieljuod在我的最初的问题的评论中提到，投入<meta name="viewport" content="width=device-width, initial-scale=1.0"/>在head固定我的问题。
Now it works more consistently and as I personally expected it, which is to not have the page be zoomed out when the screen size changes. 现在它的工作更加一致，正如我个人所期望的那样，当屏幕尺寸发生变化时，不会缩小页面。
解决方案2
0 2019-03-13 03:16:08
The very first thing I would tell you is to be aware which sizing units are relative and which are fixed. 我要告诉你的第一件事是要知道哪些尺寸单位是相对的，哪些是固定的。 Sizing your text in vh is saying make my text x percentage of the height of the screen. 在vh调整文本大小就是说我的文字是屏幕高度的百分比。 So of course when the screen changes height the text size changes. 当然，当屏幕改变高度时，文本大小会发生变化。 You should be using a unit that is not relative to the screen size. 您应该使用与屏幕尺寸无关的单位。 Options include but are not limited to sizing in pixels( px ) or rems( rem ). 选项包括但不限于像素大小（ px ）或rems（ rem ）。 rem is a relative unit but it is relative to the root ( body ) font-size and only changes if that changes. rem是一个相对单位，但它相对于根（ body ）字体大小，只有在更改时才会更改。 Hope that helps! 希望有所帮助！
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.