it-swarm-eu.dev

Responsywny rozmiar czcionki w CSS

Stworzyłem witrynę przy użyciu siatki Zurb Foundation 3 . Każda strona ma duży kod 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 poziomy przewijanie, aby pomieścić duży tekst.

Zauważyłem, że na Zurb Foundation 3 Typografia przykładowa strona , nagłówki dostosowują się do przeglądarki, gdy jest skompresowana i rozszerzony.

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

310
user2213682

Kod font-size nie odpowie tak podczas zmiany rozmiaru okna przeglądarki. Zamiast tego reagują na ustawienia powiększenia/typu przeglądarki, na przykład po naciśnięciu ctrl i + razem na klawiaturze w przeglądarce.

Zapytania o media

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

Na przykład spróbuj dodać to w swoim CSS na dole, zmieniając szerokość 320px, gdziekolwiek zaczyna się łamanie projektu:

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

   body { 
      font-size: 2em; 
   }

}

Długość procentowa rzutni

Możesz także użyć długość procentowa rzutni takich jak vwname__, vhname__, vmini vmaxname__. Oficjalny dokument W3C dla tego stanu:

Długości procentów rzutni odnoszą się do rozmiaru początkowego bloku zawierającego. Po zmianie wysokości lub szerokości początkowego bloku zawierającego są odpowiednio skalowane.

Ponownie, z tego samego dokumentu W3C każda jednostka może być zdefiniowana jak poniżej:

vw unit - 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 vw lub vh.

Są one używane dokładnie w taki sam sposób, jak każda inna wartość CSS:

.text {
  font-size: 3vw;
}

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

Kompatybilność jest stosunkowo dobra, jak widać tutaj . Jednak niektóre wersje IE i Edge nie obsługują vmax. Ponadto system iOS 6 i 7 ma problem z jednostką vh, która została naprawiona w iOS 8.

266

Możesz użyć wartości viewport zamiast ems, pxs lub pts.

1vw = 1% szerokości rzutni

1vh = 1% wysokości rzutni

1vmin = 1vw lub 1vh, cokolwiek jest mniejsze

1vmax = 1vw lub 1vh, cokolwiek jest większe

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

z Css-tricks: http://css-tricks.com/viewport-sized-typography/

605
SolidSnake

Użyj specyfikatorów CSS media (tego używają [zurb]) do stylizacji responsywnej:

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

   h1 {
      font-size: 3em;
   }

   h2 {
      font-size: 2em;
   }

}
35
Albert Xing

Bawiłem się sposobami przezwyciężenia tego problemu i wierzę, że znalazłem rozwiązanie:

Jeśli możesz napisać swoją aplikację dla IE9 + i wszystkich innych nowoczesnych przeglądarek obsługujących jednostki CSS calc (), rem i vmin, możesz użyć tego do uzyskania skalowalnego tekstu bez zapytań o media

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

Oto w akcji: http://codepen.io/csuwldcat/pen/qOqVNO

33
csuwldcat

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

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

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

29
Javi Stolz

Jest na to kilka sposobów

Użyj zapytania o media , ale wymaga 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 . Po prostu zmień podstawowy rozmiar czcionki, 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ć bazowemu rozmiarowi czcionki na domyślne ustawienie urządzenia i odpocząć w 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 12pt, 1em jest równe 12pt. Ems są skalowalne w przyrodzie, więc 2em będzie równe 24pt, .5em będzie równe 6pt itd.
  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. 12pt = 100%). Podczas korzystania z jednostki procentowej tekst pozostaje w pełni skalowalny dla urządzeń mobilnych i dostępności.

patrz kyleschaeffer.com/....

CSS3 obsługuje nowe wymiary względem portu widoku. Ale to nie działa w Androidzie

  1. 3.2vw = 3.2% szerokości rzutni
  2. 3,2 vh = 3,2% wysokości rzutni
  3. 3.2vmin = Mniejszy z 3.2vw lub 3.2vh
  4. 3.2vmax = Większy z 3.2vw lub 3.2vh

    body
    {
        font-size: 3.2vw;
    }
    

patrz css-tricks.com/.... a także spójrz na caniuse.com/....

14
aWebDeveloper

Rozwiązanie „vw” ma problem z przechodzeniem do bardzo małych ekranów. Możesz ustawić rozmiar podstawowy i stamtąd przejść z calc ():

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

Istnieje inne podejście do responsywnych rozmiarów czcionek - przy użyciu 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 wykonać tę pracę w IE7-8, musisz dodać rezerwę w przypadku jednostek px:

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

Jeśli rozwijasz się z LESS, możesz stworzyć mixin, który zrobi dla ciebie matematykę.

Obsługa jednostek Rem - http://caniuse.com/#feat=rem

9
Yuri P.

Jest to częściowo realizowane w fundamencie 5.

w _type.scss mają dwa zestawy zmiennych nagłówkowych

// 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 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 małych ekranów używają one 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 nadpisać w niestandardowym pliku scss, aby ustawić rozmiary czcionek dla odpowiednich rozmiarów ekranu

8
Sudheer

Responsywny rozmiar czcionki można również wykonać za pomocą tego javascript o nazwie FlowType :

FlowType - responsywna typografia internetowa w najlepszym wydaniu: rozmiar czcionki na podstawie szerokości elementu

Lub ten javascript o nazwie FitText :

FitText - Elastyczne rozmiary czcionek. Użyj tej wtyczki w swoim responsywnym projekcie, aby zmienić rozmiar nagłówków na podstawie proporcji

6
phlegx

Jeśli używasz narzędzia do budowania, spróbuj Plecak.

W przeciwnym razie możesz użyć zmiennych CSS (Custom Properties), aby łatwo kontrolować minimalne i maksymalne rozmiary czcionek ( 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);
}
5
Dannie Vinther

jQuery „FitText” to prawdopodobnie najlepiej reagujące rozwiązanie nagłówkowe. Sprawdź to w Github: https://github.com/davatron5000/FitText.js

3
Raghav Kukreti

W oryginalnym oryginalnym sass nie scss możesz użyć poniższych miksów do automatycznego ustawiania rozmiaru czcionki i wszystkich nagłówków.

Podoba mi się, ponieważ jest dużo bardziej kompaktowy. I szybciej pisać. Poza tym zapewnia taką samą funkcjonalność. W każdym razie, jeśli nadal chcesz trzymać się nowej składni - scss możesz przekonwertować mój sass na scss tutaj: [CONVERT SASS TO SCSS TUTAJ]

Poniżej daję ci cztery mixy sass. Będziesz musiał dostosować swoje ustawienia do swoich potrzeb.

=font-h1p-style-generator-manual() // you dont need use this one those are only styles to make it pretty
=media-query-base-font-size-change-generator-manual() // this mixin sets base body size that will be used by h1-h6 tags to recalculate their size in 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 grania ustawieniami wystarczy wykonać połączenie na jednym miksie - czyli: + config-and-run-font-generator () . Zobacz poniższy kod i komentarze, aby uzyskać więcej informacji.

Sądzę, że możesz to zrobić automatycznie w celu uzyskania zapytania o media, tak jak w przypadku tagów nagłówka, ale wszyscy używamy innego zapytania o media, więc nie byłoby to odpowiednie dla wszystkich. Korzystam z mobilnego podejścia do projektowania pierwszego, więc właśnie tak bym to zrobił. Możesz kopiować i używać tego kodu.

SKOPIUJ 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 place holder 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

KONFIGURACJA WSZYSTKICH MIESZANEK DO TWOICH POTRZEB - GRAJ Z NAMI! :) A NASTĘPNIE ZADZWOŃ NA GÓRĘ RZECZYWISTEGO KODU SASS Z:

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

To wygenerowałoby to wyjście. Możesz dostosować parametry, aby wygenerować różne zestawy wyników, jednak ponieważ wszyscy używamy różnych zapytań o media niektórych miksów, będziesz musiał ręcznie edytować (styl i media).

GENEROWANE 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; 

}
2
DevWL

Podobnie jak w przypadku wielu frameworków, gdy „wyjdziesz z siatki” i zastąpisz domyślny CSS frameworka, wszystko zacznie się łamać w lewo i prawo. Ramy są z natury sztywne. Jeśli używałbyś domyślnego stylu Zurb H1 wraz z ich domyślnymi klasami siatki, to strona internetowa powinna wyświetlać się poprawnie na telefonie komórkowym (tj. Responsywnym).

Wygląda jednak na to, że chcesz mieć bardzo duże nagłówki 6.2em, co oznacza, że ​​tekst będzie musiał się zmniejszyć, aby zmieścić się w mobilnym wyświetlaczu w trybie pionowym. Najlepiej jest użyć responsywnej wtyczki 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>
2
thdoan

Znalazłem to rozwiązanie, działa mi 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)));
}
1
Buzz

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

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

Jednostki te autorezują w zależności od szerokości i wysokości ekranu.

1
Priyanshu Tiwari

Jednym ze sposobów rozwiązania problemu dobrego wyglądu tekstu zarówno na komputerze stacjonarnym, jak i na telefonie/tablecie jest ustalenie rozmiaru tekstu na fizyczne jednostki, takie jak fizyczne centymetry lub cale, które nie zależą od ekranu PPI (punkty na cal).

Na podstawie ta odpowiedź , poniżej znajduje się kod, którego używam na końcu dokumentu HTML, aby uzyskać responsywny rozmiar 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 elementom różnej klasy są przypisane rozmiary czcionek w jednostkach fizycznych, o ile przeglądarka/system operacyjny jest poprawnie skonfigurowany dla PPI na jego ekranie. Czcionka jednostki fizycznej nie zawsze jest zbyt duża i nie jest zbyt mała, o ile odległość do ekranu jest zwykła (odległość czytania książki).

1
Serge Rogatch
 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; }
1
King Rayhan

Wiem, że to stare pytanie, miałem to samo pytanie i po googlowaniu zobaczyłem świetny artykuł z CSS-Tricks . Działa dobrze. Mam nadzieję, że to pomoże:

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 właściwości line-height, 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)));
}
1
heyjr

Właśnie wpadłem na pomysł, aby zdefiniować rozmiar czcionki tylko raz na element, ale wciąż jest on pod wpływem zapytań o media.

Najpierw ustawiam zmienną „--text-scale-unit” na „1vh” lub „1vw” w zależności od okienka przy użyciu zapytań o media.

Następnie używam zmiennej używającej calc () i mojego numeru mnożnika dla rozmiaru czcionki.

/* Define variable based on the orientation. */
/* 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 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 powinna być możliwa przy każdym zapytaniu o media.

Jak znaleźć ten pomysł?

1

Rozmiar tekstu można ustawić za pomocą jednostki vwname__, 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, które 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;
    }
  }
1
user10154568

Możesz zmienić rozmiar czcionki, jeśli zdefiniujesz ją w vw (szerokość rzutni). Jednak nie wszystkie przeglądarki go obsługują. Rozwiązaniem jest użycie JS, aby zmienić podstawowy rozmiar czcionki w zależności od szerokości przeglądarki i ustawić wszystkie rozmiary czcionek w%. Oto artykuł opisujący sposób tworzenia responsywnych czcionek: http://wpsalt.com/responsive-font-size-in-wordpress-theme/

1

żywam tych klas CSS, aby mój tekst był 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);
}
1
Buzz

Obawiam się, że nie ma łatwego rozwiązania w kwestii zmiany rozmiaru czcionki. 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;}

Rozmiar czcionki to 3em zarówno dla szerokości 300px, jak i 200px. Ale potrzebujesz mniejszego rozmiaru czcionki dla szerokości 200 pikseli, aby idealnie odpowiadać.

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 (np .: szerokość: 35%; wysokość: 28 pikseli). W ten sposób Twój tekst będzie w pełni reagować na wszystkie urządzenia.

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

użyj tego równania.

W przypadku wszystkiego większego lub mniejszego niż 1440 i 768 można nadać mu wartość statyczną lub 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 gdy zmniejszysz szerokość okna do 768, może to skończyć będąc 12px, a nie minimalnym chcesz. Dzięki takiemu podejściu można ustawić górną granicę i dolną granicę, a czcionka będzie skalować się między nimi.

0
Shuwei

Po wielu wnioskach skończyłem na tej kombinacji

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

 h2{
        font-size: 4.3vw;
    }

}
0
Harsh Gupta