Can someone help me understand something involving the
`<meta name="viewport" content="width=device-width, initial-scale=1.0">`
I understand it can help scale h1, p, and other text tags. I also understand that by using 'font-size 32px' will then unable the scale feature. How then would you adjust font size while still maintaining the befits from the meta scale? If not possible is it just better to use h1-h6 based on the font size needed and manually create responsiveness for custom font-sizes?
I tried
<h1>Hello world</h1>
h1 {
// Different approaches
font-size: 32px;
font-size: 2em;
font-size: 5vw;
}`
The viewport meta tag isn't directly related to the way you're setting a font size.
On some devices, the viewport will have a virtual size very different than that of its real size. Even in those cases, setting a pixel-based font size doesn't actually set it to the real pixel size.
The meta tag, as shown, turns off some of those virtual scaling options so that the browser viewport works as you'd expect.
If not possible is it just better to use h1-h6 based on the font size needed and manually create responsiveness for custom font-sizes?
No, the elements you choose should be based on the semantics of the content, and not purely based on styling. For example, if you're having a section heading, you'll use one of the h1, h2, etc., elements. If you just want to adjust font size, you'd do that in CSS. HTML is for structure, CSS is for styling.
Also, a bit of a trick for you... If you are good about keeping things relative, it's easiest to use em in your sizing. And then, you can adjust the entire interface just by changing font-size on the body element.