Elastyczny rozmiar czcionki w CSS

Stworzyłem witrynę za pomocą siatki Zurb Foundation 3 . Każda strona ma dużą h1:

body {
  font-size: 100%
}

/* Headers */

h1 {
  font-size: 6.2em;
  font-weight: 500;
}

<div class="row">
  <div class="twelve columns text-center">
    <h1> LARGE HEADER TAGLINE </h1>
  </div>
  <!-- End Tagline -->
</div>
<!-- End Row -->

Gdy zmieniam rozmiar przeglądarki na rozmiar mobilny, duża czcionka nie dostosowuje się i powoduje, że przeglądarka zawiera przewijanie w poziomie, aby zmieścić duży tekst.

Zauważyłem, że na przykładowej stronie Zurb Foundation 3 Typografia nagłówki dostosowują się do przeglądarki, ponieważ jest ona skompresowana i rozwinięta.

Czy brakuje mi czegoś naprawdę oczywistego? Jak to osiągnąć?

font-sizeNie odpowie tak podczas zmiany rozmiaru okna przeglądarki. Zamiast tego reagują na ustawienia powiększenia / rozmiaru przeglądarki, na przykład gdy naciśniesz Ctrli +razem na klawiaturze w przeglądarce.

Zapytania o media

Trzeba będzie spojrzeć na użycie zapytań o media, aby zmniejszyć rozmiar czcionki w określonych odstępach czasu, w których zaczyna on łamać projekt i tworzyć paski przewijania.

Na przykład spróbuj dodać to w swoim CSS na dole, zmieniając szerokość 320 pikseli dla każdego miejsca, w którym projekt zaczyna się psuć:

@media only screen and (max-width: 320px) {

   body { 
      font-size: 2em; 
   }

}

Długości procentowe rzutni

Można również użyć rzutni długości procentowe , takie jak vw, vh, vmini vmax. Oficjalny dokument W3C dla tego stwierdza:

Długości procentowe rzutni są względne do rozmiaru początkowego bloku zawierającego. Gdy wysokość lub szerokość początkowego bloku zawierającego zostanie zmieniona, są one odpowiednio skalowane.

Ponownie, z tego samego dokumentu W3C każdą jednostkę można zdefiniować jak poniżej:

jednostka vw - równa 1% szerokości początkowego bloku zawierającego.

Jednostka vh - równa 1% wysokości początkowego bloku zawierającego.

Jednostka vmin - równa mniejszej z vw lub vh.

Jednostka vmax - równa większej z vw lub vh.

I są używane dokładnie tak samo, jak każda inna wartość CSS:

.text {
  font-size: 3vw;
}

.other-text {
  font-size: 5vh;
}

Kompatybilność jest względnie dobra, co można zobaczyć tutaj . Jednak niektóre wersje Internet Explorera i Edge nie obsługują vmax. Ponadto iOS 6 i 7 mają problem z jednostką vh, która została naprawiona w iOS 8.

Możesz użyć wartości rzutni zamiast ems, pxs lub pts:

1vw = 1% szerokości rzutni

1vh = 1% wysokości rzutni

1vmin = 1vw lub 1vh, w zależności od tego, która wartość jest mniejsza

1vmax = 1vw lub 1vh, w zależności od tego, która wartość jest większa

h1 {
  font-size: 5.9vw;
}
h2 {
  font-size: 3.0vh;
}
p {
  font-size: 2vmin;
}

From CSS-Tricks: Viewport Sized Typography

Rozważam sposoby rozwiązania tego problemu i wierzę, że znalazłem rozwiązanie:

Jeśli potrafisz napisać aplikację dla Internet Explorera 9 (i nowszych) i wszystkich innych nowoczesnych przeglądarek obsługujących CSS calc (), jednostki rem i jednostki vmin. Możesz użyć tego do uzyskania skalowalnego tekstu bez zapytań o media:

body {
  font-size: calc(0.75em + 1vmin);
}

Tutaj jest w akcji: http://codepen.io/csuwldcat/pen/qOqVNO

Używaj mediaspecyfikatorów CSS (tego właśnie używają [zurb]) do responsywnego stylu:

@media only screen and (max-width: 767px) {

   h1 {
      font-size: 3em;
   }

   h2 {
      font-size: 2em;
   }

}

Jeśli nie masz nic przeciwko użyciu rozwiązania jQuery, możesz wypróbować wtyczkę TextFill

jQuery TextFill zmienia rozmiar tekstu, aby zmieścił się w kontenerze i sprawia, że ​​rozmiar czcionki jest jak największy.

https://github.com/jquery-textfill/jquery-textfill

Można to osiągnąć na kilka sposobów.

Użyj zapytania o media , ale wymaga ono rozmiarów czcionek dla kilku punktów przerwania:

body
{
    font-size: 22px;
}

h1
{
    font-size: 44px;
}

@media (min-width: 768)
{
    body
    {
        font-size: 17px;
    }
    h1
    {
        font-size: 24px;
    }
}

Użyj wymiarów w % lub em . Wystarczy zmienić podstawowy rozmiar czcionki, a wszystko się zmieni. W przeciwieństwie do poprzedniego, możesz po prostu zmienić czcionkę ciała, a nie h1 za każdym razem, lub pozwolić, aby podstawowy rozmiar czcionki był domyślny dla urządzenia, a reszta to em:

1. „Ems” (em) : „Em” jest skalowalną jednostką. Em jest równy bieżącemu rozmiarowi czcionki, na przykład jeśli rozmiar czcionki dokumentu wynosi 12 pkt, 1 em jest równy 12 pkt. Ems są z natury skalowalne, więc 2 em to 24 pt, 0,5 em to 6 pt itp.
2. Procent (%) : Jednostka procentowa jest bardzo podobna do jednostki „em”, z wyjątkiem kilku podstawowych różnic. Przede wszystkim obecny rozmiar czcionki jest równy 100% (tj. 12 pkt = 100%). Podczas korzystania z jednostki procentowej tekst pozostaje w pełni skalowalny dla urządzeń mobilnych i dla ułatwień dostępu.

Zobacz kyleschaeffer.com / ....

CSS 3 obsługuje nowe wymiary, które odnoszą się do portu widoku. Ale to nie działa na Androidzie:

1. 3,2 vw = 3,2% szerokości rzutni
2. 3,2vh = 3,2% wysokości rzutni
3. 3.2vmin = Mniejszy z 3.2vw lub 3.2vh

4. 3.2vmax = Większa z 3.2vw lub 3.2vh

   body
   {
       font-size: 3.2vw;
   }

Zobacz CSS-Tricks ... a także spójrz na Can I Use ...

Istnieje inne podejście do elastycznych rozmiarów czcionek - korzystanie z jednostek rem.

html {
    /* Base font size */
    font-size: 16px;
}

h1 {
    font-size: 1.5rem;
}

h2 {
    font-size: 1.2rem;
}

Później w zapytaniach o media możesz dostosować wszystkie rozmiary czcionek, zmieniając podstawowy rozmiar czcionki:

@media screen and (max-width: 767px) {
    html {
      /* Reducing base font size will reduce all rem sizes */
      font-size: 13px;
    }

    /* You can reduce font sizes manually as well */
    h1 {
        font-size: 1.2rem;
    }
    h2 {
        font-size: 1.0rem;
    }
}

Aby to zadziałało w Internet Explorerze 7 i Internet Explorerze 8, musisz dodać awaryjne jednostki pikseli:

h1 {
    font-size: 18px;
    font-size: 1.125rem;
}

Jeśli rozwijasz się z Lessem , możesz stworzyć mixin, który wykona matematykę za Ciebie.

Obsługa urządzeń Rem - http://caniuse.com/#feat=rem

Rozwiązanie „vw” ma problem z przejściem na bardzo małe ekrany. Możesz ustawić rozmiar bazy i przejść stamtąd za pomocą calc ():

font-size: calc(16px + 0.4vw);

Jest to częściowo zaimplementowane w fundamencie 5.

W pliku _type.scss mają dwa zestawy zmiennych nagłówka:

// We use these to control header font sizes
// for medium screens and above

$h1-font-size: rem-calc(44) !default;
$h2-font-size: rem-calc(37) !default;
$h3-font-size: rem-calc(27) !default;
$h4-font-size: rem-calc(23) !default;
$h5-font-size: rem-calc(18) !default;
$h6-font-size: 1rem !default;


// We use these to control header size reduction on small screens
$h1-font-reduction: rem-calc(10) !default;
$h2-font-reduction: rem-calc(10) !default;
$h3-font-reduction: rem-calc(5) !default;
$h4-font-reduction: rem-calc(5) !default;
$h5-font-reduction: 0 !default;
$h6-font-reduction: 0 !default;

Dla średnich w górę generują rozmiary na podstawie pierwszego zestawu zmiennych:

@media #{$medium-up} {
    h1,h2,h3,h4,h5,h6 { line-height: $header-line-height; }
    h1 { font-size: $h1-font-size; }
    h2 { font-size: $h2-font-size; }
    h3 { font-size: $h3-font-size; }
    h4 { font-size: $h4-font-size; }
    h5 { font-size: $h5-font-size; }
    h6 { font-size: $h6-font-size; }
}

A dla domyślnych, tj. Małych ekranów, używają drugiego zestawu zmiennych do generowania CSS:

h1 { font-size: $h1-font-size - $h1-font-reduction; }
h2 { font-size: $h2-font-size - $h2-font-reduction; }
h3 { font-size: $h3-font-size - $h3-font-reduction; }
h4 { font-size: $h4-font-size - $h4-font-reduction; }
h5 { font-size: $h5-font-size - $h5-font-reduction; }
h6 { font-size: $h6-font-size - $h6-font-reduction; }

Możesz użyć tych zmiennych i zastąpić w swoim niestandardowym pliku scss, aby ustawić rozmiary czcionek dla odpowiednich rozmiarów ekranu.

Elastyczny rozmiar czcionki można również wykonać za pomocą tego kodu JavaScript o nazwie FlowType :

• http://simplefocus.com/flowtype/
• https://github.com/simplefocus/FlowType.JS

FlowType - responsywna typografia sieci w najlepszym wydaniu: rozmiar czcionki oparty na szerokości elementu.

Lub ten kod JavaScript o nazwie FitText :

• http://fittextjs.com/
• https://github.com/davatron5000/FitText.js

FitText - uelastycznia rozmiary czcionek. Użyj tej wtyczki w swoim responsywnym projekcie do zmiany rozmiaru nagłówków na podstawie proporcji.

Jeśli używasz narzędzia do kompilacji, wypróbuj Plecak.

W przeciwnym razie możesz użyć zmiennych CSS (właściwości niestandardowe), aby łatwo kontrolować minimalne i maksymalne rozmiary czcionek tak ( demo ):

* {
  /* Calculation */
  --diff: calc(var(--max-size) - var(--min-size));
  --responsive: calc((var(--min-size) * 1px) + var(--diff) * ((100vw - 420px) / (1200 - 420))); /* Ranges from 421px to 1199px */
}

h1 {
  --max-size: 50;
  --min-size: 25;
  font-size: var(--responsive);
}

h2 {
  --max-size: 40;
  --min-size: 20;
  font-size: var(--responsive);
}

Widziałem świetny artykuł z CSS-Tricks . Działa dobrze:

body {
    font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw -
    [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width])));
}

Na przykład:

body {
    font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
}

Możemy zastosować to samo równanie do line-heightwłaściwości, aby zmienić ją również w przeglądarce.

body {
    font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
    line-height: calc(1.3em + (1.5 - 1.2) * ((100vw - 300px)/(1600 - 300)));
}

Właśnie wymyśliłem pomysł, w którym musisz zdefiniować rozmiar czcionki tylko raz na element, ale wciąż mają na nią wpływ zapytania medialne.

Najpierw ustawiam zmienną „--text-scale-unit” na „1vh” lub „1vw”, w zależności od rzutni za pomocą zapytań o media.

Następnie używam zmiennej za pomocą funkcji calc () i mojego numeru multiplikatora dla rozmiaru czcionki:

/* Define a variable based on the orientation. */
/* The value can be customized to fit your needs. */
@media (orientation: landscape) {
  :root{
    --text-scale-unit: 1vh;
  }
}
@media (orientation: portrait) {
  :root {
    --text-scale-unit: 1vw;
  }
}


/* Use a variable with calc and multiplication. */
.large {
  font-size: calc(var(--text-scale-unit) * 20);
}
.middle {
  font-size: calc(var(--text-scale-unit) * 10);
}
.small {
  font-size: calc(var(--text-scale-unit) * 5);
}
.extra-small {
  font-size: calc(var(--text-scale-unit) * 2);
}

<span class="middle">
  Responsive
</span>
<span class="large">
  text
</span>
<span class="small">
  with one
</span>
<span class="extra-small">
  font-size tag.
</span>

W moim przykładzie użyłem tylko orientacji rzutni, ale zasada ta powinna być możliwa przy każdym zapytaniu o media.

„FitText” jQuery jest prawdopodobnie najlepiej reagującym rozwiązaniem nagłówkowym. Sprawdź to na GitHub: https://github.com/davatron5000/FitText.js

Podobnie jak w przypadku wielu frameworków, kiedy „zejdziesz z siatki” i zastąpisz domyślny CSS frameworku, rzeczy zaczną się łamać w lewo iw prawo. Ramy są z natury sztywne. Jeśli miałbyś używać domyślnego stylu Zurb H1 wraz z domyślnymi klasami siatki, strona internetowa powinna wyświetlać się poprawnie na urządzeniach mobilnych (tj. Responsywnych).

Wydaje się jednak, że potrzebujesz bardzo dużych nagłówków 6.2em, co oznacza, że ​​tekst będzie musiał się skurczyć, aby zmieścił się na wyświetlaczu mobilnym w trybie portretowym. Najlepszym rozwiązaniem jest użycie responsywnej wtyczki tekstowej jQuery, takiej jak FlowType i FitText . Jeśli chcesz czegoś lekkiego, możesz sprawdzić moją wtyczkę jQuery Scalable Text:

http://thdoan.github.io/scalable-text/

Przykładowe użycie:

<script>
$(document).ready(function() {
  $('.row .twelve h1').scaleText();
}
</script>

W prawdziwym oryginalnym Sass (nie scss) możesz użyć poniższych miksów, aby automatycznie ustawić akapit i wszystkie nagłówki font-size.

Podoba mi się, ponieważ jest znacznie bardziej kompaktowy. I szybsze pisanie. Poza tym zapewnia tę samą funkcjonalność. W każdym razie, jeśli nadal chcesz trzymać się nowej składni - scss, możesz przekonwertować moją zawartość Sass na scss tutaj: [KONWERSJA SASS NA SCSS TUTAJ]

Poniżej podaję cztery miksy Sass. Będziesz musiał dostosować ich ustawienia do swoich potrzeb.

=font-h1p-style-generator-manual() // You don’t need to use this one. Those are only styles to make it pretty.
=media-query-base-font-size-change-generator-manual() // This mixin sets the base body size that will be used by the h1-h6 tags to recalculate their size in a media query.
=h1p-font-size-generator-auto($h1-fs: 3em, $h1-step-down: 0.3, $body-min-font-size: 1.2em, $p-same-as-hx: 6) // Here you will set the size of h1 and size jumps between h tags
=config-and-run-font-generator() // This one only calls the other ones

Po zakończeniu gry z ustawieniami po prostu wywołaj jeden mixin - czyli: + config-and-run-font-generator () . Aby uzyskać więcej informacji, zobacz poniższy kod i komentarze.

Wydaje mi się, że można to zrobić automatycznie w przypadku zapytania o media, tak jak w przypadku tagów nagłówka, ale wszyscy używamy różnych zapytań o media, więc nie byłoby to odpowiednie dla wszystkich. Korzystam z koncepcji projektowania mobilnego, więc właśnie tak bym to zrobił. Skopiuj i użyj tego kodu.

KOPIUJ I WKLEJ MIESZANKI DO SWOJEGO PLIKU:

=font-h1p-style-generator-manual()
  body
    font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif // google fonts
    font-size: 100%
    line-height: 1.3em
  %headers
    line-height: 1em
    font-weight: 700
  p
    line-height: 1.3em
    font-weight: 300
  @for $i from 1 through 6
    h#{$i}
      @extend %headers


=media-query-base-font-size-change-generator-manual()
  body
    font-size: 1.2em
  @media screen and (min-width: 680px)
    body
      font-size: 1.4em
  @media screen and (min-width: 1224px)
    body
      font-size: 1.6em
  @media screen and (min-width: 1400px)
    body
      font-size: 1.8em

=h1p-font-size-generator-auto($h1-fs: 3em, $h1-step-down: 0.3, $body-min-font-size: 1.2em, $p-same-as-hx: 6)
  $h1-fs: $h1-fs // Set first header element to this size
  $h1-step-down: $h1-step-down // Decrement each time by 0.3
  $p-same-as-hx: $p-same-as-hx // Set p font-sieze same as h(6)
  $h1-fs: $h1-fs + $h1-step-down // Looping correction
  @for $i from 1 through 6
    h#{$i}
      font-size: $h1-fs - ($h1-step-down * $i)
    @if $i == $p-same-as-hx
      p
        font-size: $h1-fs - ($h1-step-down * $i)

// RUN ONLY THIS MIXIN. IT WILL TRIGGER THE REST
=config-and-run-font-generator()
  +font-h1p-style-generator-manual() // Just a place holder for our font style
  +media-query-base-font-size-change-generator-manual() // Just a placeholder for our media query font size
  +h1p-font-size-generator-auto($h1-fs: 2em, $h1-step-down: 0.2, $p-same-as-hx: 5) // Set all parameters here

KONFIGURUJ WSZYSTKIE MIESZANKI NA SWOJE POTRZEBY - GRAJ Z NIM! :) A NASTĘPNIE ZADZWOŃ NA SWOIM RZECZYWISTYM KODIE SASS Z:

+config-and-run-font-generator()

To wygeneruje ten wynik. Możesz dostosować parametry, aby generować różne zestawy wyników. Ponieważ jednak wszyscy używamy różnych zapytań o media, niektóre miksy będziesz musiał edytować ręcznie (styl i media).

Wygenerowany CSS:

body {
  font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 100%;
  line-height: 1.3em;
  word-wrap: break-word; }

h1, h2, h3, h4, h5, h6 {
  line-height: 1em;
  font-weight: 700; }

p {
  line-height: 1.3em;
  font-weight: 300; }

body {
  font-size: 1.2em; }

@media screen and (min-width: 680px) {
  body {
    font-size: 1.4em; } }
@media screen and (min-width: 1224px) {
  body {
    font-size: 1.6em; } }
@media screen and (min-width: 1400px) {
  body {
    font-size: 1.8em; } }
h1 {
  font-size: 2em; }

h2 {
  font-size: 1.8em; }

h3 {
  font-size: 1.6em; }

h4 {
  font-size: 1.4em; }

h5 {
  font-size: 1.2em; }

p {
  font-size: 1.2em; }

h6 {
  font-size: 1em;

}

Używam tych klas CSS, dzięki czemu mój tekst jest płynny na dowolnym ekranie:

.h1-fluid {
    font-size: calc(1rem + 3vw);
    line-height: calc(1.4rem + 4.8vw);
}

.h2-fluid {
    font-size: calc(1rem + 2vw);
    line-height: calc(1.4rem + 2.4vw);
}

.h3-fluid {
    font-size: calc(1rem + 1vw);
    line-height: calc(1.4rem + 1.2vw);
}

.p-fluid {
    font-size: calc(1rem + 0.5vw);
    line-height: calc(1.4rem + 0.6vw);
}

 h1 { font-size: 2.25em; } 
 h2 { font-size: 1.875em; }
 h3 { font-size: 1.5em; }
 h4 { font-size: 1.125em; }
 h5 { font-size: 0.875em; }
 h6 { font-size: 0.75em; }

Istnieją następujące sposoby osiągnięcia tego celu:

1. Użyj rem dla np. 2.3 rem
2. Użyj ich np. Do 2.3em
3. Użyj% np. 2,3% Ponadto możesz użyć: vh, vw, vmax i vmin.

Jednostki te dokonają automatycznej zmiany rozmiaru w zależności od szerokości i wysokości ekranu.

Możesz dostosować rozmiar czcionki, jeśli definiujesz go w vw (szerokość rzutni). Jednak nie wszystkie przeglądarki obsługują to. Rozwiązaniem jest użycie JavaScript do zmiany podstawowego rozmiaru czcionki w zależności od szerokości przeglądarki i ustawienia wszystkich rozmiarów czcionek w%.

Oto artykuł opisujący sposób tworzenia elastycznych czcionek: http://wpsalt.com/responsive-font-size-in-wordpress-theme/

Znalazłem to rozwiązanie i działa dla mnie bardzo dobrze:

/* Fluid font size:
minimum font size at min. device width 300px = 14
maximum font size at max. device width 1600px = 26
*/

body {
    font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
}

Jednym ze sposobów rozwiązania problemu z tekstem, który wygląda dobrze zarówno na komputerze stacjonarnym, jak i telefonie komórkowym / tablecie, jest ustawienie rozmiaru tekstu na jednostki fizyczne, takie jak fizyczne centymetry lub cale, które nie zależą od PPI ekranu (punktów na cal).

W oparciu o tę odpowiedź poniżej znajduje się kod, którego używam na końcu dokumentu HTML dla elastycznego rozmiaru czcionki:

<div id='testdiv' style='height: 1in; left: -100%; position: absolute; top: -100%; width: 1in;'></div>
<script type='text/javascript'>
  var devicePixelRatio = window.devicePixelRatio || 1;
  dpi_x = document.getElementById('testdiv').offsetWidth * devicePixelRatio;
  dpi_y = document.getElementById('testdiv').offsetHeight * devicePixelRatio;

  function setFontSizeForClass(className, fontSize) {
      var elms = document.getElementsByClassName(className);
      for(var i=0; i<elms.length; i++) {
          elms[i].style.fontSize = String(fontSize * dpi_y / 96) + "px";
      }
  }

  setFontSizeForClass('h1-font-size', 30);
  setFontSizeForClass('action-font-size', 20);
  setFontSizeForClass('guideline-font-size', 25);
  // etc for your different classes
</script>

W powyższym kodzie elementy innej klasy mają przypisane rozmiary czcionek w jednostkach fizycznych, o ile przeglądarka / system operacyjny jest poprawnie skonfigurowany do PPI jego ekranu.

Czcionka jednostki fizycznej jest zawsze niezbyt duża i niezbyt mała, o ile odległość od ekranu jest zwykle (odległość czytania książki).

Rozmiar tekstu można ustawić za pomocą vwjednostki, co oznacza „szerokość rzutni”. W ten sposób rozmiar tekstu będzie zgodny z rozmiarem okna przeglądarki:

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_responsive_text

Do mojego osobistego projektu użyłem vw i @meida. Działa idealnie.

.mText {
    font-size: 6vw;
}

@media only screen and (max-width: 1024px) {
    .mText {
        font-size: 10vw;
    }
}


.sText {
    font-size: 4vw;
}

@media only screen and (max-width: 1024px) {
    .sText {
        font-size: 7vw;
    }
}

Użyj tego równania:

calc(42px + (60 - 42) * (100vw - 768px) / (1440 - 768));

Dla czegokolwiek większego lub mniejszego niż 1440 i 768 możesz albo nadać mu wartość statyczną, albo zastosować to samo podejście.

Wadą rozwiązania vw jest to, że nie można ustawić współczynnika skali, powiedzmy, że 5vw przy rozdzielczości ekranu 1440 może mieć rozmiar czcionki 60px, rozmiar czcionki pomysłu, ale kiedy zmniejszysz szerokość okna do 768, może to skończyć się 12 pikseli, a nie minimum, którego chcesz.

Dzięki takiemu podejściu możesz ustawić górną i dolną granicę, a czcionka będzie się skalować między nimi.

Możemy użyć calc () z css

p{
font-size: calc(48px + (56 - 48) * ((100vw - 300px) / (1600 - 300))) !important;
}

Wzór matematyczny to calc (minsize + (maxsize - minsize) * (100vm - minviewportwidth) / (maxwidthviewoport - minviewportwidth)))

Codepen

Obawiam się, że nie ma łatwego rozwiązania w zakresie zmiany rozmiaru czcionek. Możesz zmienić rozmiar czcionki za pomocą zapytania o media, ale technicznie nie zmieni się płynnie. Na przykład, jeśli używasz:

@media only screen and (max-width: 320px){font-size: 3em;}

Twój font-sizebędzie 3em zarówno na 300 pikseli i 200 pikseli szerokości. Ale potrzebujesz mniejszej font-sizeszerokości 200 pikseli, aby idealnie reagować.

Więc jakie jest prawdziwe rozwiązanie? Jest tylko jeden sposób. Musisz utworzyć obraz PNG (z przezroczystym tłem) zawierający tekst. Następnie możesz łatwo dostosować swój obraz (na przykład: szerokość: 35%; wysokość: 28 pikseli). W ten sposób Twój tekst będzie w pełni reagował na wszystkie urządzenia.

Po wielu wnioskach skończyłem z tą kombinacją:

@media only screen and (max-width: 730px) {

    h2 {
        font-size: 4.3vw;
    }
}

Spróbuj tego

html { font-size: min(max(16px, 4vw), 22px); }

mam to z https://css-tricks.com/simplified-fluid-typography/

Oto coś, co zadziałało dla mnie. Testowałem to tylko na iPhonie.

Niezależnie od tego h1, czy masz tagi h2, czy pumieść to wokół tekstu:

<h1><font size="5">The Text you want to make responsive</font></h1>

To renderuje 22-punktowy tekst na pulpicie i jest nadal czytelny na iPhonie.

<font size="5"></font>