Responsywny rozmiar czcionki w CSS

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

1vw = 1% szerokości viewportu

1vh = 1% wysokości widoku

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

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

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

From CSS-Tricks: Typografia w rozmiarze Viewport

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

Jeśli możesz napisać swoją aplikację dla Internet Explorera 9 (i nowszych) i wszystkich innych nowoczesnych przeglądarek, które obsługują CSS calc (), jednostki rem i jednostki vmin. Można tego użyć 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żyj specyfikacji CSS media (tego używają [zurb]) do stylizacji responsywnej:

@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 tak, aby pasował do kontenera 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 rozmiaru czcionki 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 w em:

1. " em "(em) : "em" jest skalowalną jednostką. Em jest równy aktualnemu rozmiarowi czcionki, na przykład, jeśli rozmiar czcionki dokumentu wynosi 12 pkt, 1 em jest równy 12 pkt. Ems są skalowalne w naturze, więc 2 em równa się 24 pt, .5 em równa się 6 pt itd..
2. procent (%) : Jednostka procentowa jest 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 dostępność.

Zobacz kyleschaeffer.com/....

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

1. 3.2 vw = 3.2% szerokości viewportu
2. 3.2 vh = 3.2% wysokości viewportu
3. 3,2 vmin = mniejszy od 3,2 vw lub 3,2 vh

4. 3.2 vmax = większy o 3.2 vw lub 3.2 VH

   body
   {
       font-size: 3.2vw;
   }
   

Zobacz CSS-sztuczki ... a także spójrz na Czy Mogę Użyj...

Istnieje inne podejście do responsywnych rozmiarów czcionek-używając 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żna 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 działało w Internet Explorer 7 i Internet Explorer 8 trzeba będzie dodać rezerwę z jednostkami px:

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

Jeśli rozwijasz się z mniej , możesz utworzyć mixin, który wykona za Ciebie obliczenia.

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

Rozwiązanie " vw " ma problem przy przechodzeniu na bardzo małe ekrany. Możesz ustawić rozmiar bazowy i przejść stamtąd za pomocą calc ():

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

Mogę powiedzieć, że moja metoda ma najlepsze podejście do rozwiązania Twojego problemu

h1{
  font-size : clamp(2rem, 10vw, 5rem);
}

Tutaj clamp ma 3 argumenty.

• Pierwszy to minimalny dozwolony rozmiar czcionki.

• Trzeci to maksymalny dozwolony rozmiar czcionki.

• Drugim argumentem jest wielkość czcionki, którą chcesz mieć zawsze. Jego jednostka musi być względna (vw, vh, ch), a nie absolutna (tj. nie px, mm, pt). względna Jednostka sprawi, że zmieni swój rozmiar w.r. T ekran zmiany rozmiary.

Rozważmy przykład : rozważ, że istnieje duża ikona fontawesome, którą chcesz dynamicznie zmieniać (responsive icon)

fa-random-icon{
   font-size: clamp( 15rem, 80vw, 80vh)   
}

• tutaj 80vw jest preferowanym rozmiarem czcionki.
• 15 rem to minimalny rozmiar czcionki .
• 80vh to maksymalny rozmiar czcionki.

Tzn.

• Jeśli w konkretnym rozmiarze ekranu mobilnego, jeśli 80vw

• If screen is too wide then jeśli 80vw > 80vh to rozmiar czcionki to 80vh.

Te metody powyżej sugerowane przez ludzi zawsze mają nieco niepewny wynik... podobnie jak wtedy, gdy używamy tylko vw, rozmiar czcionki może być czasami zbyt duży lub zbyt mały (nieograniczony).

Używanie zapytań media jest zbyt stare.

Jest to częściowo zaimplementowane w Fundacji 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 medium up, generują rozmiary na podstawie pierwszego zbioru 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; }
}

I 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ć je w niestandardowym pliku scss, aby ustawić rozmiary czcionek dla odpowiednich rozmiarów ekranu.

Widziałem świetny artykuł z CSS-Tricks . Działa po prostu 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 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)));
}

Responsywny 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 internetowa w najlepszym wydaniu: rozmiar czcionki na podstawie szerokości elementu.

Lub ten kod JavaScript o nazwie FitText :

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

FitText - sprawia, że rozmiary czcionek są elastyczne. Użyj tej wtyczki na responsywnym projekcie, aby zmienić rozmiar nagłówków na podstawie proporcji.

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

W przeciwnym razie możesz użyć zmiennych CSS (właściwości niestandardowe), 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);
}

Właśnie wpadłem na pomysł, z którym trzeba tylko określić rozmiar czcionki raz na element, ale nadal jest pod wpływem zapytań o media.

Najpierw ustawiłem zmienną " -- text-scale-unit "na" 1vh " lub "1VW", w zależności od widoku za pomocą zapytań o media.

Następnie używam zmiennej używając calc () i mojego mnożnika dla font-size:

/* 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 viewportu, ale zasada powinna być możliwe z dowolnymi zapytaniami o media.

JQuery "FitText" jest prawdopodobnie najlepszym rozwiązaniem responsywnym nagłówka. Sprawdź to na GitHub: https://github.com/davatron5000/FitText.js

Jak w przypadku wielu frameworków, po "zejściu z siatki" i nadpisaniu domyślnego CSS frameworka, wszystko zacznie się łamać w lewo i w prawo. Ramy są z natury sztywne. Jeśli chcesz użyć domyślnego stylu Zurb H1 wraz z ich domyślnymi klasami siatki, to strona internetowa powinna wyświetlać się poprawnie na urządzeniach mobilnych (np. responsive).

Wydaje się jednak, że potrzebujesz bardzo dużych nagłówków 6.2 em, co oznacza, że tekst będzie musiał się kurczyć, aby zmieścić się wewnątrz mobilnego wyświetlacza w trybie portretowym. Najlepszym rozwiązaniem jest użycie responsywnego tekstu jQuery plugin, taki jak FlowType i FitText. Jeśli chcesz coś lekkiego, możesz sprawdzić mój skalowalny tekst jQuery plugin:

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

Przykładowe użycie:

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

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

Poniżej podaję cztery Sass mixins. Będziesz musiał dostosować ich ustawienia do Twoich 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 wykonaj połączenie na jednym mixinie - czyli: +config-and-run-font-generator () . Zobacz kod poniżej i komentarze, aby uzyskać więcej informacji.

Myślę, że można to zrobić automatycznie dla zapytania mediów, jak to jest zrobione dla znaczników nagłówka, ale wszyscy używamy różnych zapytań mediów, więc nie byłoby to odpowiednie dla wszystkich. Używam podejścia do projektowania mobilnego, więc tak bym to zrobił. Zapraszam do kopiowania i użyj tego kodu.

SKOPIUJ I WKLEJ TE MIXINY 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

SKONFIGURUJ WSZYSTKIE MIXINY DO SWOICH POTRZEB-BAW SIĘ NIM! A POTEM NAZWIJ TO NA GÓRZE SWOJEGO KODU SASS:

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

To wygeneruje to wyjście. Można dostosować parametry do generowania różnych zestawów wyników. Ponieważ jednak wszyscy używamy różnych zapytań o media, niektóre mixiny będziesz musiał edytować ręcznie(styl i media).

WYGENEROWANO 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 i sprawiają, że mój tekst jest płynny na dowolnym rozmiarze ekranu:

.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);
}

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

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

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

Codepen

Spróbuj umieścić to na arkuszu stylów:

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

Więcej informacji na https://css-tricks.com/simplified-fluid-typography/

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

Są następujące sposoby, dzięki którym możesz to osiągnąć:

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

Te jednostki będą automatycznie skalowane w zależności od szerokości i wysokości ekranu.

Możesz dostosować rozmiar czcionki, jeśli zdefiniujesz ją w vw (szerokość viewport). Jednak nie wszystkie przeglądarki go obsługują. Rozwiązaniem jest użycie JavaScript, aby zmienić podstawowy rozmiar czcionki w zależności od szerokości przeglądarki i ustawić wszystkie rozmiary czcionek w %.

Oto artykuł opisujący jak tworzyć responsywne CZCIONKI: http://wpsalt.com/responsive-font-size-in-wordpress-theme/

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

/* 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, aby tekst dobrze wyglądał zarówno na komputerze stacjonarnym, jak i na telefonie komórkowym/tablecie, jest ustalenie rozmiaru tekstu na jednostki fizyczne, takie jak fizyczne centymetry lub cale, które nie zależą od PPI ekranu (punktów na cal).

Na podstawie tej odpowiedzi Poniżej znajduje się kod, którego używam na końcu dokumentu HTML dla responsywnego 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 skonfigurowany poprawnie dla PPI swojego ekranu.

Czcionka jednostki fizycznej nie jest zawsze zbyt duża i nie za mała, o ile odległość do ekranu jest zwykła (odległość odczytu książki).

Rozmiar tekstu można ustawić za pomocą jednostki vw, co oznacza "szerokość widoku". 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

.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 wszystkich większych lub mniejszych 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ć proporcji skali, powiedzmy 5vw przy rozdzielczości ekranu 1440 może skończyć się 60px rozmiar czcionki, twój pomysł rozmiar czcionki, ale kiedy zmniejszysz szerokość okna do 768, może skończyć się 12px, a nie minimalne chcesz.

Dzięki temu podejściu można ustawić górną granicę i dolnej granicy, a czcionka będzie skalować się pomiędzy nimi.

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

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

    h2 {
        font-size: 4.3vw;
    }
}

Oto coś, co mi się udało. Testowałem go tylko na iPhonie.

Czy masz h1, h2, lub p tagi umieszczają to wokół Twojego tekstu:

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

To renderuje tekst 22pt na pulpicie i nadal jest czytelny na iPhone.

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

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 to płynnie rozmiaru. Dla przykładu, jeśli użyjesz:

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

Twoje font-size będzie 3em zarówno dla szerokości 300 pikseli, jak i 200 pikseli. Ale potrzebujesz niższej font-size dla szerokości 200px, aby uzyskać doskonałą responsywność.