Understanding text sizing quirks in CSS for responsive design
Question
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.
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?
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. Altough, if you only resize the browser itself and not use the Chrome's device toolbar, they behave the same? So maybe you can see how I'm getting confused:
https://codepen.io/mhlroy/pen/oVoyeN
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
All I want is for the text to stay the same size. I've seen some people mention using vh for the 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 answers
solution1
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.
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.
solution2
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. 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 ). rem is a relative unit but it is relative to the root ( body ) font-size and only changes if that changes. Hope that helps!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.