Адаптивни големини на фонтови во CSS

Веќе знаете дека мерните единици rem се пресметуваат релативно во однос на големината на фонтот на коренскиот елемент, која стандардно изнесува 16px:

csshtml {
  font-size: 16px; /* стандардна вредност */
}

Оваа карактеристика се користи за масовно менување на големините на фонтовите при промена на ширината на екранот. Ајде да погледнеме како се прави ова.

Нека на нашите тагови им се зададени следниве големини:

cssh1 {
  font-size: 1.5rem; /* одговара на 24px */
}
p {
  font-size: 1rem; /* одговара на 16px */
  margin: 2rem;    /* одговара на 32px */
}

Ајде да направиме така што при промена на ширината на екранот адаптивно да се менуваат големините, зададени преку rem. За ова со помош на медија-барања ќе ја менуваме големината на фонтот на коренскиот елемент:

css@media (max-width: 600px) {
  html {
    font-size: 16px;
  }
}
@media (min-width: 600px) and (max-width: 1200px) {
  html {
    font-size: 18px;
  }
}
@media (min-width: 1200px) {
  html {
    font-size: 20px;
  }
}

css@media (max-width: 300px) {
  h1 {
    font-size: 32px;
  }
  h2 {
    font-size: 24px;
  }
  p {
    font-size: 16px;
  }
}
@media (min-width: 300px) and (max-width: 900px) {
  h1 {
    font-size: 36px;
  }
  h2 {
    font-size: 27px;
  }
  p {
    font-size: 18px;
  }
}
@media (min-width: 900px) {
  h1 {
    font-size: 40px;
  }
  h2 {
    font-size: 30px;
  }
  p {
    font-size: 20px;
  }
}