How do you make the text size responsive and fit different screen sizes?
I tried using em units but it did not work.
I've tried using Media querys:
EX: @media(max-width:768px){font-size:1.5em}
I've tried the target / context = result method.
EX: My h2 from my slide has 40px so I took the 40 and divide it by 16 (40/16 = 2.5 in)
You can use the unit of measure "rem", it uses the root source of the page, ie the html tag, which is always 16px. this avoids having to do calculations with different contexts.
A little about font sizes:
Ems
A unit is scalable that is used in web document media. An em is equal to the current font-size, for example, if the font size of the document is 12pt, 1em is equal to 12pt. Ems are scalable in nature, so 2em would be equal to 24pt, .5em would be equal to 6pt, etc.
Pixels (px)
Pixels are units that are used on fixed-size screen media (that is, to be read on the computer screen). A pixel equals one point on the computer screen (the smallest division of the resolution of your screen). Many web designers use pixel units in web documents in order to produce a pixel-perfect representation of your website as it is rendered in the browser. One problem with the pixel unit is that it does not scale up for visually impaired readers or down to adjust mobile devices.
Points (en)
Dots are traditionally used in print media (everything that is to be printed on paper, etc.). A dot is equal to 1/72 of an inch. Points are much like pixels, as they are fixed-size units and can not be scaled in size.
Percent (%)
The cent unit is very much like the "on" unit, except for some fundamental differences. First, the current font-size equals 100% (that is, 12pt = 100%). While using the device percent, the text remains fully scalable for mobile devices and for accessibility.
Source: link
In summary use the% that will be responsive. See the example:
h1{
font-size: 100%;
}
h2{
font-size: 50%;
}
h3{
font-size: 25%;
}<h1>Teste 100%</h1>
<h2>Teste 50%</h2>
<h3>Teste 25%</h3>