Jak stworzyć responsywny rozmiar czcionki za pomocą jednostki CSS

vm Ostatnio robię poprawki na blogu. Przyglądam się temu, jak pisałem kiedyś CSS. Widzę, że dla pewnych nagłówków tekstowych napisałem tyle "@media Queries", aby tekst zawsze dopasowywał się do wielkości ekranu. Oczywiście tak nie powinno się robić. W sumie to rozwiązanie zakłada pewną ilość znaków tekście.  

Spójrz. Czy to dobrze wygląda?

.title {
    text-align: center;
    font-size: 2.3em;
    line-height: 1.1;
    text-transform: uppercase;
    font-style: normal;
    font-weight: 700;
    margin-bottom: 0;
    /* border-top: solid 1px white; */
    position: relative;
    z-index: 0;
}

@media screen and (min-width: 20em)
.title {
    font-size: 2.7em;
}

@media screen and (min-width: 28em)
.title {
    font-size: 2.5em;
}

@media screen and (min-width: 37em)
.title {
    font-size: 3.9em;
}

@media screen and (min-width: 44em)
.title {
    font-size: 5.9em;
}

@media screen and (min-width: 58em)
.title {
    font-size: 7.4em;
}

Mogło być gorzej. Mogłem użyć jQuery i dynamicznie obliczać rozmiar ekranu i dopasowywać rozmiar czcionki w ten sposób.

Zaraz.

To w sumie dobry pomysł, gdyby tylko można było, to zrobić używając tylko CSS.

Na szczęście żyjemy w roku 2020 i istnieją od wielu lat lepsze rozwiązania.  W CSS, istnieje coś takiego jak rozmiar ViewPort. Określa on rozmiar rzeczy w zależności od rozmiaru viewportu, a sam viewport można uznać za rozmiar ekranu w zależności od urządzenia, na jakim wyświetla się strona internetowa.

Jedna jednostka to 1% rozmiaru jednego z wymiarów osi ekranu. Długość albo szerokość. 

Te rozmiary mogą być bardzo użyteczne 

Dlaczego to jest takie wspaniałe

Istnieje wiele powodów:

• Nie musisz pisać złożonej logiki, aby uzyskać efekt
• Możesz bardziej intuicyjnie określić rozmiar swojego tekstu względem ekranu
• Masz dokładne powiązanie pomiędzy rozmiarem ekranu a tą zmienną

Jak to działa

Jakie mamy rozmiary do dyspozycji:

1 vm : 1% długości viewport

1vh : 1% wysokości viewport

1vmin : 1% wysokości lub długości. Zostanie wybrany rozmiar, który jest mniejszy

1 vmax : 1% wysokości lub długości. Zostanie wybrany rozmiar, który jest większy

Przykład użycia

Wracając, do poprzedniego przykładu. Można by go poprawić w taki sposób.

.title {
    text-align: center;
    font-size: 2.3em;
    line-height: 1.1;
    text-transform: uppercase;
    font-style: normal;
    font-weight: 700;
    margin-bottom: 0;
    /* border-top: solid 1px white; */
    position: relative;
    z-index: 0;
}

@media screen and (min-width: 20em)
.title {
    font-size: 2.7em;
    font-size: 12vw;
}

@media screen and (min-width: 28em)
.title {
    font-size: 2.5em;
    font-size: 12vw;
}

@media screen and (min-width: 37em)
.title {
    font-size: 3.9em;
    font-size: 12vw;
}

@media screen and (min-width: 44em)
.title {
    font-size: 5.9em;
    font-size: 12vw;
}

Zauważ, że zostawiłem stare wartości na wszelki wypadek, gdy trafię na starą przeglądarkę, w której ta technika nie jest wspierana.

Oto kolejny przykład.

h1 {
  font-size: 5.9vw;
}

h2 {
  font-size: 3.0vh;
}

p {
  font-size: 2vmin;
}

Sprawdź te demo

Zmień rozmiary ekranu, aby zobaczyć czy tekst też się zmienia.

Czy można to zrobić jeszcze lepiej?

Nie wiem, czy wiesz, ale od jakiegoś czasu istnieje funkcja calc() w CSS.

Dlaczego nie stworzyć funkcji, która by ustalała rozmiary czcionki według pewnego wzoru. Dodatkowo dla rozmiaru ekranu 1000px ustalibyśmy stały rozmiar tekstu.

html {
  font-size: 16px;
}
@media screen and (min-width: 320px) {
  html {
    font-size: calc(16px + 8 * ((100vw - 320px) / 680));
  }
}
@media screen and (min-width: 1000px) {
  html {
    font-size: 24px;
  }
}

Niedługo będzie można skorzystać z funkcji max() i min() w CSS. Co uprości ten kod jeszcze bardziej.

html {
  font-size: min(max(1rem, 4vw), 24px);
}

Istnieje jeszcze najnowsza funkcja, która spełni podobny cel. Jest to clamp(). Używając jej , można skrócić kod jeszcze bardziej.

body {
  font-size: clamp(100%, 1rem + 2vw, 24px);
}