Question:
How can I make the text size responsive and adapt to different screen sizes?
I tried using em units but it didn't help.
I've already tried using Media queries:
EX: @media(max-width:768px){font-size:1.5em}
I've already tried the target/context= result method.
EX: My h2 of my slide is 40px so I took the 40 and divided by 16 (40/16 = 2.5 em)
Answer:
A little about font sizes:
Ems (in)
A scalable unit that is used in web document media is scalable. An em is equal to the current font-size, for example if the document font size is 12pt , 1em is equal to 12pt . Ems are scalable in nature, so 2em would equal 24pt , .5em would equal 6pt , etc.
pixels (px)
Pixels are units that are used in fixed-size screen media (ie to be read on the computer screen). A pixel is equal to a point on your computer screen (the smallest division of your screen resolution). Many web designers use pixel units in web documents in order to produce a pixel-perfect representation of their website as it is rendered in the browser. One problem with the pixel unit is that it doesn't scale up for visually impaired readers or down to scale for mobile devices.
points (en)
Dots are traditionally used in print media (anything that is to be printed on paper, etc.). One point is equal to 1/72 of an inch. Points are much like pixels, in that they are fixed-size units and cannot be scaled in size.
Percent (%)
The cent unit is very similar to the "em" unit, except for a few fundamental differences. Firstly, the current font-size is equal to 100% (i.e. 12pt = 100%) . While using the percent device, the text remains fully scalable for mobile devices and for accessibility.
Source: http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/
In short use the % which 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>