How to make source responsive?

Question

How to make text size responsive and fit different screen sizes?

I tried using units em but it didn’t help.

I’ve tried using Media Querys:

EX: @media(max-width:768px){font-size:1.5em}

I’ve tried target/context= result.

EX: My slide H2 has 40px so I took the 40 and split by 16 (40/16 = 2.5 in)

Answer 1

A little bit about font sizes:

Ems (in)

A unit that is used in web document means is scalable. One in is equal to the current font-size, for example, if the document font size is 12pt , 1in 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 on fixed screen media (i.e., to be read on the computer screen). A pixel is equal to a point on the computer screen (the smallest division of the resolution of your screen). Many web designers use pixel drives in web documents in order to produce a pixel-perfect representation of their website as it is processed in the browser. One problem with pixel drive is that it doesn’t scale up for visually impaired readers or down to adjust mobile devices.

Points (pt)

Dots are traditionally used in printing media (all that is to be printed on paper, etc.). A dot is equal to 1/72 inch. Dots are as well as pixels , to the extent that they are units of fixed size and cannot be sized.

Percent (%)

The hundred unit is very similar to the "in" unit, except for some fundamental differences. First, the current font-size is equal to 100% (i.e., 12pt = 100%) . While using the device percent, 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 % that will be responsive. See 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>

Answer 2

You can use the unit of measure "rem", it uses as a basis the root source of the page or html tag which is always 16px. this avoids having to do calculations with different contexts.