Czysty CSS, aby dopasować rozmiar czcionki do dynamicznej liczby znaków

CSS3 obsługuje nowe wymiary, które są względem portu widoku. Ale to nie działa w Androidzie

1. 3.2 vw = 3.2% szerokości viewportu
2. 3.2 vh = 3.2% wysokości viewportu
3. 3,2 vmin = mniejszy z 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-tricks.com/.... Zobacz też: caniuse.com/....

Lub

Użyj zapytania o media .Najprostszym sposobem jest użycie wymiary w % lub em. Po prostu zmień podstawowy rozmiar czcionki wszystko się zmieni.

@media (max-width: @screen-xs) {
    body{font-size: 10px;}
}

@media (max-width: @screen-sm) {
    body{font-size: 14px;}
}


h5{
    font-size: 1.4em;
}

Użyj wymiarów w % lub em . Po prostu zmień podstawowy rozmiar czcionki wszystko się zmieni. W poprzednim możesz po prostu zmienić czcionkę ciała, a nie h1 za każdym razem lub pozwolić rozmiar czcionki bazowej na domyślny rozmiar urządzenia i spocząć w em

Zobacz kyleschaeffer.com/.... więcej informacji na temat em, px i %

Być może zainteresuje cię podejście calc:

font-size: calc(4vw + 4vh + 2vmin);

Źródło: https://codepen.io/CrocoDillon/pen/fBJxu

Jedynym sposobem prawdopodobnie byłoby ustawienie różnych szerokości dla różnych rozmiarów ekranu, ale takie podejście jest dość inacurate i powinieneś użyć rozwiązania js.

h1 {
    font-size: 20px;
}

@media all and (max-device-width: 720px){
    h1 {
        font-size: 18px;
    }
}

@media all and (max-device-width: 640px){
    h1 {
        font-size: 16px;
    }
}

@media all and (max-device-width: 320px){
    h1 {
        font-size: 12px;
    }
}

Wiem, że ressurecjonuję dawno martwe pytanie, ale miałem to samo pytanie i chciałem coś dodać. Proszę, nie ban mnie za to, czułem, że jest to na tyle ważne, aby uzasadnić tę odpowiedź, usunę jeśli będzie to wymagane. @Joseph Silber się myli, kodowanie wszystkich możliwości faktycznie jest realnym sposobem na to. Powodem jest to, że w rzeczywistości nie ma nieskończonych możliwości. Technicznie tak, ale 99% odwiedzających będzie używać standardowej rozdzielczości. Jest to podwójnie prawdziwe dla mobilny (główny powód responsywnego projektowania stron internetowych), ponieważ większość systemów operacyjnych mobilnych uruchamia aplikacje na pełnym ekranie bez zmiany rozmiaru okna.

Również wysokość jest prawie nieistotna ze względu na pasek przewijania (do pewnego momentu natychmiast opuściłbym stronę internetową, która miała więcej niż 4 lub 5 stóp długości, ale to głównie prawda), więc musisz się martwić tylko o szerokość. I tak naprawdę, jedyne szerokości, dla których musisz kodować, to: 240, 320, 480 (dla starszych iThings), 640, 800, 1024, 1280, 1440, 1600, 1920, 2048, 2560. Nawet nie kłopocz się 4k, będzie nadmuchać obrazy zbyt dużo i rozmiar 2560 rozciągnięty do 100% szerokości wygląda dobrze na monitorze 4k(testowałem to). Nie przejmuj się również 720 (720x480), jak sugerował poprzedni plakat. Jego rozdzielczość używana prawie wyłącznie przez aparaty cyfrowe, a nawet wtedy jest bardzo rzadka.

Jeśli ktoś używa egzotycznej rozdzielczości, prawie każdy renderer wykonany w ciągu ostatnich 15 lat zaokrągli się w dół, więc jeśli czyjaś szerokość ekranu jest, powiedzmy. 1100, its aby załadować regułę 1024 CSS, Twoja witryna nie powinna się łamać. Powoduje to, że rozliczanie egzotycznych rozdzielczości jest niepotrzebne, próbując stworzyć responsywną regułę, a pomysł, że musisz kodować każdą możliwą konfigurację piksel po pikselu, jest śmieszny, chyba że ktoś używa przeglądarki internetowej tak przestarzałej, że Twoja strona prawdopodobnie w ogóle by się nie załadowała.

Dla odniesienia, oto rozwiązanie JS, które zmienia rozmiar czcionki w zależności od długości tekstu w kontenerze.

function scaleFontSize(element) {
    var container = document.getElementById(element);

    // We only want to scale down long text, so first we reset
    // font-size to 100%, in case this function is called multiple times.
    container.style.fontSize = "100%";

    // Now actually check if the text is wider than
    // its container, if so then reduce font-size
    if (container.scrollWidth > container.clientWidth) {
        container.style.fontSize = "70%";
    }
}

Dla mnie, wywołuję tę funkcję, gdy użytkownik dokonuje wyboru w rozwijanym menu, a następnie div w moim menu zostanie wypełniony(tutaj występuje dynamiczny tekst).

    scaleFontSize("my_container_div");

Ponadto używam również elipsy CSS ("...") obcinać jeszcze nawet dłuższy tekst też, tak:

#my_container_div {
    width: 200px; /* width required for text-overflow to work */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Więc ostatecznie:

• Krótkie słowa: np. "jabłka"

  W pełni renderowane, ładne duże litery.

• Długie słowa: np. "jabłka i pomarańcze"

  Jest skalowany w dół o 70% za pomocą powyższej funkcji skalowania JS.

• Super długie słowa: np. "jabłka & pomarańcze & BANAN..."

  Jest skalowany w dół o 70% i obcinany przez "..."elipsy, poprzez powyższą funkcję skalowania JS i regułę CSS.

Spróbuj RFS (dla responsywnego rozmiaru czcionki) biblioteki autorstwa MartijnCuppens, która może być zaimplementowana w Bootstrap

Jak wielu wspomniało w komentarzach do postu @ DMTinter, OP pytało o liczbę ("ilość") zmieniających się znaków. Pytał również o CSS, ale jak zauważył @Alexander, "nie jest to możliwe tylko z CSS". O ile mi wiadomo, to wydaje się być prawdą w tym czasie, więc wydaje się również logiczne, że ludzie chcieliby wiedzieć następną najlepszą rzecz.

function fitText(el){
  var text = el.text();
  var fsize = parseInt(el.css('font-size'));
  var measured = measureText(text, fsize);

  if (measured.width > el.width()){
    console.log('reducing');
    while(true){
      fsize = parseInt(el.css('font-size'));
      var m = measureText(text, fsize );
      if(m.width > el.width()){
        el.css('font-size', --fsize + 'px');
      }
      else{
        break;
      }
    }
  }
  else if (measured.width < el.width()){
    console.log('increasing');
    while(true){
      fsize = parseInt(el.css('font-size'));
      var m = measureText(text, fsize);
      if(m.width < el.width()-4){ // not sure why -4 is needed (often)
        el.css('font-size', ++fsize + 'px');
      }
      else{
        break;
      }
    }
  }
}

Oto Kosz JS: http://jsbin.com/pidavon/edit?html, css,JS, console, output
Proszę zasugerować ewentualne ulepszenia (nie jestem zainteresowany używaniem canvas do pomiaru tekstu...wygląda na to, że za dużo nad głową(?)).

Podziękowania dla @ Pete za funkcję measureText: https://stackoverflow.com/a/4032497/442665

To rozwiązanie może również pomóc:

$(document).ready(function () {
    $(window).resize(function() {
        if ($(window).width() < 600) {
            $('body').css('font-size', '2.8vw' );
        } else if ($(window).width() >= 600 && $(window).width() < 750) {
            $('body').css('font-size', '2.4vw');
        } 
         // and so on... (according to our needs)
        } else if ($(window).width() >= 1200) {
            $('body').css('font-size', '1.2vw');
        }
    }); 
  });

Vw jest rozwiązaniem, ale zdecydowanie nie dobrym, powiedzmy, jeśli ustawisz szerokość czcionki na 3vw, wygląda normalnie w zwykłej sytuacji, ale gdy przeglądasz ją za pomocą monitorów 2K, 4K lub nawet 8K, czcionka będzie wyglądać ogromnie, plus na mniejszych urządzeniach, wyglądają na małe, możesz oczywiście rozwiązać ten problem za pomocą zapytania o media, ale prawdziwym bólem jest to, że nigdy nie możesz uzyskać dokładnego rozmiaru czcionki, o który prosisz, ponieważ vw jest ograniczony do szerokości widoku, a nie szerokości zawartości.

Raz rozwiązanie byłoby użycie calc razem z vw.

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

Powyższy kod ustawia minimalny rozmiar czcionki na 42px, a maksymalny na 60px, zaczyna skalować się, gdy przeglądarka jest szersza niż 768px, a stopniowo osiąga 60, gdy osiągnie 1440 w szerokości okna

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

Chodzi o to, że takie podejście definiuje czcionkę według rozmiaru zawartości. Chodzi mi o to, że mówisz, że masz zawartość o maksymalnej szerokości 1440, a w jakiej sytuacji chcesz, aby czcionka była 60px, ale gdy jest mobilna, chcesz 42, to możesz przyjąć to właśnie podejście, czcionka będzie skalowana od 768 - 1440, dla czegoś większego niż 1440, po prostu daj jej statyczne 60px, ponieważ sama zawartość nie rośnie więcej niż to.