Font reponsive with css [closed]

An alternative to having full control over the resizing of your fonts is to use the average queries of css :

@media screen and (min-width: 480px) {
    p {font-size: 12px;}
}
@media screen and (min-width: 768px) {
    p {font-size: 16px;}
}
@media screen and (min-width: 1024px) {
    p {font-size: 18px;}
}

In this case you can create as many rules as you need.

The second option would really be to use em . Each em corresponds to the current font size, which by default in browsers is 16px . That is:

p {
    font-size: 1em; //16px
}
h1 {
    font-size: 2em; //32px
}
h2 {
    font-size: 1.5em; //24px;
}

In the EM standard, 1 EM usually equals 16 pixels , that is, as the browser defaults to texts. Using EM is a matter of accessibility, as people with reading difficulties can freely increase and decrease the size of text in a proportional way. What gives you more freedom for the user without breaking your layout!

I leave here a option if it's interesting for you. See that 16 pixels = 100%, 10 pixels equals 62.5%. (16 x 0.625 = 10). If you want it makes it much easier to calculate values from a decimal basis. You can set body with font-size value: 62.5% as the default for the entire document. So make 1em equal to 10px

Then it would look like this:

body {
  font-size: 62.5%;
}

.bloco {
  width: 100%; 
}
.bloco p {
  font-size: 1em; /* Conforme explicado acima, seria equivalente a 10px */
}

A text of 12px, for example, would be equivalent to 1.2em (Read the explanation above). Already a header with 36px would be equivalent to 3.6em (Read the explanation above).

I decided to share this solution I had applied to a project with needs related to responsive text, to increase and decrease the size of the text freely proportionally.