Ale co jeśli kontener nie jest viewport (body)?

To pytanie zadaje w komentarzu Alex pod zaakceptowaną odpowiedzią.

Fakt ten nie oznacza, że vw nie może być stosowany do pewnego stopnia do rozmiaru tego pojemnika. Teraz, aby zobaczyć jakąkolwiek zmianę, należy założyć, że pojemnik w jakiś sposób jest elastyczny pod względem wielkości. Czy to przez bezpośredni procent width, czy przez 100% minus marże. Punkt staje się "dyskusyjny" jeśli kontener jest zawsze ustawiony na, Niech powiedzmy, 200px wide--następnie Ustaw font-size, która działa dla tej szerokości.

Przykład 1

Z pojemnikiem o elastycznej szerokości, należy jednak zdać sobie sprawę, że w jakiś sposób pojemnik jest nadal jest rozmiar poza viewport. W związku z tym jest to kwestia dostosowania ustawienia vw w oparciu o tę procentową różnicę wielkości do widoku, co oznacza uwzględnienie rozmiaru owijek nadrzędnych. weź to. przykład:

div {
    width: 50%;
    border: 1px solid black;
    margin: 20px;
    font-size: 16px;
    /* 100 = viewport width, as 1vw = 1/100th of that
       So if the container is 50% of viewport (as here)
       then factor that into how you want it to size.
       Let's say you like 5vw if it were the whole width,
       then for this container, size it at 2.5vw (5 * .5 [i.e. 50%])
    */
    font-size: 2.5vw; 
}

Zakładając, że div jest potomkiem body, to jest 50% tej szerokości 100%, która jest rozmiarem widoku w tym podstawowym przypadku. Zasadniczo chcesz ustawić vw, który będzie dla ciebie dobrze wyglądał. Jak widać w moim komentarzu w powyższym css, możesz "przemyśleć" to matematycznie w odniesieniu do pełnego rozmiaru viewportu, ale nie potrzebujesz , aby to zrobić. Tekst będzie" wyginał się " wraz z kontenerem, ponieważ kontener jest wyginany ze zmianą rozmiaru okna widokowego. Aktualizacja: oto przykład dwóch różnej wielkości kontenerów.

Przykład 2

Możesz pomóc zapewnić rozmiar widoku, wymuszając obliczenia oparte na tym. rozważ ten przykład:

html {width: 100%;} /* force html to be viewport width */
body {width: 150%; } /* overflow the body */

div {
    width: 50%;
    border: 1px solid black;
    margin: 20px;
    font-size: 16px;
    /* 100 = viewport width, as 1vw = 1/100th of that
       Here, the body is 150% of viewport, but the container is 50% 
       of viewport, so both parents factor  into how you want it to size.
       Let's say you like 5vw if it were the whole width,
       then for this container, size it at 3.75vw 
       (5 * 1.5 [i.e. 150%]) * .5 [i.e. 50%]
    */
    font-size: 3.75vw; 
}

Rozmiar jest nadal oparty na viewporcie, ale zasadniczo jest ustawiony na podstawie rozmiaru samego kontenera.

Należy dynamicznie zmieniać rozmiar kontenera...

Jeśli rozmiar element kontenera zmieniał dynamicznie swoją relację procentową poprzez @media break points lub poprzez javascript, wtedy jakikolwiek podstawowy " cel "wymagałby ponownego obliczenia, aby utrzymać tę samą "relację" dla rozmiaru tekstu.

Weźmy przykład # 1 powyżej. Jeśli div został przełączony na 25% width przez @media lub javascript, to w tym samym czasie font-size musiałby dostosować w zapytaniu o media lub przez javascript do nowego obliczenia 5vw * .25 = 1.25. To by postawiło rozmiar tekstu o takim samym rozmiarze, jaki byłby, gdyby "szerokość" oryginalnego kontenera 50% została zmniejszona o połowę w stosunku do rozmiaru okna widoku, ale teraz została zmniejszona z powodu zmiany własnych obliczeń procentowych.

Wyzwanie

Z funkcją CSS3 calc() w użyciu, trudno byłoby dostosować dynamicznie, ponieważ funkcja ta nie działa w tym czasie do celów font-size. Więc nie można zrobić czystej korekty CSS3, jeśli szerokość jest zmiana na calc(). Oczywiście niewielka regulacja szerokości marginesów może nie wystarczyć, aby uzasadnić jakąkolwiek zmianę w font-size, więc może to nie mieć znaczenia.

To, co robię w jednym z moich projektów, to "mieszanka" pomiędzy vw I vh, aby dostosować rozmiar czcionki do moich potrzeb, np.:

font-size: calc(3vw + 3vh);

Rozwiązanie z SVG:

<div style="width: 60px;">  
  <svg width="100%" height="100%" viewBox="0 -200 1000 300"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <text font-size="300" fill="black">Text</text>
  </svg>
</div>

Https://jsfiddle.net/qc8ht5eb/

W tej kwestii istnieje duża filozofia. Najprostszą rzeczą do zrobienia byłoby nadanie pewnej wielkości czcionki do body (polecam 10), a wtedy wszystkie inne elementy będą miały swoją czcionkę w em lub rem. Dam ci i przykład, aby zrozumieć te jednostki. Em jest zawsze w stosunku do swojego rodzica

body{font-size:10px;}
.menu{font-size:2em;} /* that means 2*10px = 20px */
.menu li{font-size:1.5em;} /* that means 1.5*20px = 30px */

Rem jest zawsze względem ciała

body{font-size:10px;}
.menu{font-size:2rem;} /* that means 2*10px = 20px */
.menu li{font-size:1.5rem;} /* that means 1.5*10px = 15px */

I wtedy można utworzyć skrypt, który zmieni rozmiar czcionki w stosunku do szerokości kontenera. Ale nie to bym polecił. Ponieważ w kontenerze o szerokości 900px na przykład miałbyś p element o wielkości czcionki 12px powiedzmy. I na Twoim ideea, który stałby się na kontenerze o szerokości 300px przy wielkości czcionki 4PX. Musi być dolna granica. Innym rozwiązaniem byłoby Zapytanie o media queries, dzięki czemu można ustawić czcionkę dla różnych szerokości.

Ale rozwiązania, które polecam, to użycie biblioteki javascript, która Ci w tym pomoże. I fittext.js , które znalazłem do tej pory.

Zaktualizowałem, ponieważ dostałem głos w dół.

Oto Funkcja:

document.body.setScaledFont = function(f) {
  var s = this.offsetWidth, fs = s * f;
  this.style.fontSize = fs + '%';
  return this
};

Następnie przekonwertuj wszystkie rozmiary czcionek elementów potomnych dokumentów na em lub %.

Następnie dodaj coś takiego do kodu, aby ustawić podstawowy rozmiar czcionki.

document.body.setScaledFont(0.35);
window.onresize = function() {
    document.body.setScaledFont(0.35);
}

Http://jsfiddle.net/0tpvccjt/

Pure-CSS rozwiązanie z calc(), jednostek CSS i matematyki

To nie jest dokładnie to, o co prosi OP, ale może sprawić, że ktoś będzie miał dzień. Ta odpowiedź nie jest łatwa i wymaga trochę badań w developer end.

Przyszedłem w końcu, aby uzyskać czyste rozwiązanie CSS dla tego za pomocą {[2] } z różnymi jednostkami. Będziesz potrzebował podstawowego matematycznego zrozumienia formuł, aby wypracować swoje wyrażenie dla calc().

Kiedy to rozgryzłem, musiałem uzyskać responsywność na całą stronę / align = "center" bgcolor = "# e0ffe0 " / papież / / align = center / Użyję tu moich wartości, zamienię je na twoje.

Do matematyki

Będziesz potrzebował:

• ładnie dopasowany Współczynnik w jakimś viewporcie, użyłem 320px, więc mam 24px wysoki i 224px szeroki, więc współczynnik wynosi 9,333... or 28 / 3
• Szerokość kontenera, miałem padding: 3em i pełną szerokość, więc to dotarło do 100wv - 2 * 3em

X jest szerokością kontenera, więc zastąp go własnym wyrażeniem lub dostosuj wartość, aby uzyskać tekst na całą stronę. R to stosunek, jaki będziesz miał. Można go uzyskać, dostosowując wartości w niektórych widokach, sprawdzając szerokość i wysokość elementów i zastępując je własnymi wartościami. Ponadto jest width / heigth ;)

x = 100vw - 2 * 3em = 100vw - 6em
r = 224px/24px = 9.333... = 28 / 3

y = x / r
  = (100vw - 6em) / (28 / 3)
  = (100vw - 6em) * 3 / 28
  = (300vw - 18em) / 28
  = (75vw - 4.5rem) / 7

I bang! Zadziałało! Napisałem

font-size: calc((75vw - 4.5rem) / 7)

Do mojego nagłówka i ładnie dopasowywał się w każdym widoku.

Potrzebujemy tu stałych. 100vw oznacza pełną szerokość viewportu, a moim celem było ustalenie pełnej szerokości nagłówka z trochę wyściółki.

Stosunek. Uzyskanie szerokości i wysokości w jednym viewporcie dało mi stosunek do zabawy, a dzięki ratio wiem, jaka powinna być wysokość w innych szerokościach viewportu. Obliczanie ich ręką zajęłoby dużo czasu i przynajmniej zajęłoby dużo pasma, więc nie jest to dobra odpowiedź.

Podsumowanie

Zastanawiam się, dlaczego nikt tego nie rozgryzł, a niektórzy ludzie mówią nawet, że nie da się tego majstrować przy CSS. Nie lubię używać Javascript w elementy dostosowujące, więc nie akceptuję odpowiedzi JS lub nawet jQuery bez kopania więcej. Ogólnie rzecz biorąc, dobrze, że to zostało rozgryzone i jest to jeden krok do czystych wdrożeń CSS w projektowaniu stron internetowych.

Przepraszam za wszelkie nietypowe konwencje w moim tekście, nie jestem native speakerem w języku angielskim, a także całkiem nowy w pisaniu więc odpowiedzi.

Edit: należy również zauważyć, że w niektórych przeglądarkach mamy złe paski przewijania. Na przykład, podczas korzystania z Firefoksa zauważyłem, że 100vw oznacza pełną szerokość widoku, rozciągającą się pod paskiem przewijania (gdzie zawartość nie może się rozwinąć!), więc tekst o pełnej szerokości musi być starannie marginalizowany i najlepiej przetestowany z wieloma przeglądarkami i urządzeniami.

Może to nie być bardzo praktyczne, ale jeśli chcesz, aby font był bezpośrednią funkcją rodzica, bez żadnego JS, który nasłuchuje / pętli (interwał), aby odczytać rozmiar div / strony, jest na to sposób. Iframes. Wszystko w ramce iframe będzie traktować rozmiar ramki iframe jako rozmiar widoku. Sztuczka polega więc na stworzeniu ramki iframe, której szerokość jest maksymalną szerokością, jaką ma być tekst, a której wysokość jest równa maksymalnej wysokości * proporcji danego tekstu.

Pomijając ograniczenie, że jednostki viewport nie mogą również występować obok jednostek nadrzędnych dla tekstu (jak w przypadku, gdy rozmiar % zachowuje się jak każdy inny), jednostki viewport zapewniają bardzo potężne narzędzie:są w stanie uzyskać wymiar min/max. Nie możesz tego robić nigdzie indziej - nie możesz powiedzieć..niech wysokość tego div będzie szerokością rodzica * coś.

To powiedziawszy, sztuczka polega na użyciu vmin i ustawieniu rozmiaru iframe tak, aby [ułamek] * Całkowita wysokość była dobra rozmiar czcionki, gdy wysokość jest wymiarem ograniczającym, oraz [ułamek] * Całkowita szerokość, gdy szerokość jest wymiarem ograniczającym. Dlatego wysokość musi być iloczynem szerokości i proporcji.

Dla mojego konkretnego przykładu, masz

.main iframe{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: calc(3.5 * 100%);
  background: rgba(0,0,0,0);
  border-style: none;
  transform: translate3d(-50%,-50%,0);
}

Mała irytacja tą metodą polega na tym, że musisz ręcznie ustawić CSS ramki iframe. Jeśli załączysz cały plik CSS, zajmie to dużo przepustowości dla wielu obszarów tekstowych. Więc, co robię, to dołączam zasadę, że chcę prosto z mojego CSS.

var rule = document.styleSheets[1].rules[4];
var iDoc = document.querySelector('iframe').contentDocument;
iDoc.styleSheets[0].insertRule(rule.cssText); 

Możesz napisać małą funkcję, która pobiera regułę CSS / wszystkie reguły CSS, które mają wpływ na obszar tekstowy.

Nie mogę wymyślić innego sposobu, aby to zrobić bez konieczności jazdy na rowerze / słuchania JS. Realnym rozwiązaniem byłoby udostępnienie przeglądarkom sposobu skalowania tekstu jako funkcji nadrzędnego kontenera, a także zapewnienie tej samej funkcjonalności typu vmin/vmax.

Js fiddle: https://jsfiddle.net/0jr7rrgm/3 / (kliknij raz, aby zablokować czerwony kwadrat do myszy, kliknij ponownie, aby zwolnić)

Większość JS w skrzypcach to tylko moja niestandardowa funkcja click-drag

Jest sposób, aby to zrobić bez javascript!

Możesz użyć wbudowanego svg. Możesz użyć css na svg, jeśli jest on wbudowany. Należy pamiętać, że użycie tej metody oznacza, że plik svg będzie odpowiadał rozmiarowi kontenera.

Spróbuj użyć następującego rozwiązania...

HTML

<div>
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360.96 358.98" >
      <text>SAVE $500</text>

  </svg>

</div>

CSS

div {
  width: 50%; /* set your container width */
  height: 50%; /* Set your container height */

}

svg {
  width: 100%;
  height: auto;

}

text {
  transform: translate(40px, 202px);
  font-size: 62px;
  fill: #000;

}

Przykład: https://jsfiddle.net/k8L4xLLa/32/

Chcesz coś bardziej krzykliwego?

SVGs pozwala również na robienie fajnych rzeczy z kształty i śmieci. Sprawdź ten świetny przypadek użycia skalowalnego tekstu...

Https://jsfiddle.net/k8L4xLLa/14/

Za pomocą vw, em & co. działa na pewno, ale imo zawsze potrzebuje ludzkiego dotyku do dostrojenia.

Oto skrypt, który właśnie napisałem na podstawie @ tnt-rox ' answer który próbuje zautomatyzować dotyk człowieka:

$('#controller').click(function(){
	$('h2').each(function(){
    var
      $el = $(this),
      max = $el.get(0),
      el = null
    ;
    max =
      max
    ? max.offsetWidth
    : 320
    ;
    $el.css({
      'font-size': '1em',
      'display': 'inline',
    });
    el = $el.get(0);

    el.get_float = function(){
      var
        fs = 0
      ;
      if (this.style && this.style.fontSize) {
        fs = parseFloat(this.style.fontSize.replace( /([\d\.]+)em/g, '$1' ));
      }
      return fs;
    };

    el.bigger = function(){
      this.style.fontSize = (this.get_float() +0.1) +'em';
    };


    while ( el.offsetWidth < max ) {
      el.bigger();
    }
    // finishing touch.
    $el.css({
      'font-size': ((el.get_float() -0.1) +'em'),
      'line-height': 'normal',
      'display': '',
    });
	});  // end of ( each )
});	// end of ( font scaling test )

div {
  width: 50%;
  background-color: tomato;
  font-family: 'Arial';
}

h2 {
  white-space: nowrap;
}

h2:nth-child(2) {
  font-style: italic;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="button" id="controller" value="Apply" />
<div>
  <h2>Lorem ipsum dolor</h2>
  <h2>Test String</h2>
  <h2>Sweet Concatenation</h2>
  <h2>Font Scaling</h2>
</div>

Zasadniczo zmniejsza rozmiar czcionki do 1em, a następnie zaczyna zwiększać o 0,1, aż osiągnie maksymalną szerokość.

JsFiddle

100% jest względem podstawowego rozmiaru czcionki, który, jeśli nie został ustawiony, byłby domyślną wartością agenta użytkownika przeglądarki.

Aby uzyskać efekt, którego szukasz, użyłbym kawałka javascript, aby dostosować podstawowy rozmiar czcionki w stosunku do wymiarów okna.

Wewnątrz CSS spróbuj dodać to na dole zmieniając szerokość 320px dla każdego miejsca, w którym twój projekt zaczyna się łamać:

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

       body { font-size: 1em; }

    }

Następnie podaj rozmiar czcionki w "px" lub "em", jak chcesz.

Czy próbowałeś http://simplefocus.com/flowtype / ?

To jest to, czego używam do moich stron i działa idealnie. Mam nadzieję, że to pomoże.

Szukasz czegoś takiego? =>
http://jsfiddle.net/sijav/dGsC9/4/
http://fiddle.jshell.net/sijav/dGsC9/4/show/
Używałem flowtype i działa świetnie (jednak jest to js, a nie czyste rozwiązanie css)

$('body').flowtype({
 minFont : 10,
 maxFont : 40,
 minimum : 500,
 maximum : 1200,
 fontRatio : 70
});

Moje własne rozwiązanie, oparte na jQuery, działa poprzez stopniowe zwiększanie rozmiaru czcionki, aż kontener uzyska duży wzrost wysokości (co oznacza, że ma przerwę w linii). Jest to dość proste, ale działa dość dobrze i jest bardzo łatwy w użyciu. Nie musisz nic wiedzieć o używanej czcionce, wszystko jest obsługiwane przez przeglądarkę.

Możesz się nim bawić na http://jsfiddle.net/tubededentifrice/u5y15d0L/2/

Magia dzieje się tutaj:

var setMaxTextSize=function(jElement) {
    //Get and set the font size into data for reuse upon resize
    var fontSize=parseInt(jElement.data(quickFitFontSizeData)) || parseInt(jElement.css("font-size"));
    jElement.data(quickFitFontSizeData,fontSize);

    //Gradually increase font size until the element gets a big increase in height (ie line break)
    var i=0;
    var previousHeight;
    do
    {
        previousHeight=jElement.height();
        jElement.css("font-size",""+(++fontSize)+"px");
    }
    while(i++<300 && jElement.height()-previousHeight<fontSize/2)

    //Finally, go back before the increase in height and set the element as resized by adding quickFitSetClass
    fontSize-=1;
    jElement.addClass(quickFitSetClass).css("font-size",""+fontSize+"px");

    return fontSize;
};

Ten web component zmienia rozmiar czcionki tak, aby wewnętrzna szerokość tekstu odpowiadała szerokości kontenera. Sprawdź demo .

Możesz go użyć tak:

<full-width-text>Lorem Ipsum</full-width-text>

Mój problem był podobny, ale związany ze skalowaniem tekstu w nagłówku. Próbowałem dopasować czcionkę, ale musiałem przełączyć kompresor, aby uzyskać jakiekolwiek wyniki, ponieważ rozwiązywał nieco inny problem, podobnie jak Przepływ tekstu. Napisałem więc własną wtyczkę, która zmniejsza rozmiar czcionki tak, aby pasowała do kontenera, zakładając, że masz overflow: hidden i white-space: nowrap tak, że nawet jeśli zmniejszenie czcionki do minimum nie pozwala na wyświetlenie pełnego nagłówka, to po prostu odcina to, co może pokazać.

(function($) {

  // Reduces the size of text in the element to fit the parent.
  $.fn.reduceTextSize = function(options) {
    options = $.extend({
      minFontSize: 10
    }, options);

    function checkWidth(em) {
      var $em = $(em);
      var oldPosition = $em.css('position');
      $em.css('position', 'absolute');
      var width = $em.width();
      $em.css('position', oldPosition);
      return width;
    }

    return this.each(function(){
      var $this = $(this);
      var $parent = $this.parent();
      var prevFontSize;
      while (checkWidth($this) > $parent.width()) {
        var currentFontSize = parseInt($this.css('font-size').replace('px', ''));
        // Stop looping if min font size reached, or font size did not change last iteration.
        if (isNaN(currentFontSize) || currentFontSize <= options.minFontSize ||
            prevFontSize && prevFontSize == currentFontSize) {
          break;
        }
        prevFontSize = currentFontSize;
        $this.css('font-size', (currentFontSize - 1) + 'px');
      }
    });

  };

})(jQuery);

Przygotowałem prostą funkcję skalowania używając CSS transform zamiast font-size. Możesz użyć go wewnątrz dowolnego kontenera, nie musisz ustawiać zapytań o media itp.:)

Blog post: https://blog.polarbits.co/2017/03/07/full-width-css-js-scalable-header/

Kod:

function scaleHeader() {
  var scalable = document.querySelectorAll('.scale--js');
  var margin = 10;
  for (var i = 0; i < scalable.length; i++) {
    var scalableContainer = scalable[i].parentNode;
    scalable[i].style.transform = 'scale(1)';
    var scalableContainerWidth = scalableContainer.offsetWidth - margin;
    var scalableWidth = scalable[i].offsetWidth;
    scalable[i].style.transform = 'scale(' + scalableContainerWidth / scalableWidth + ')';
    scalableContainer.style.height = scalable[i].getBoundingClientRect().height + 'px';
  }
}

Demo robocze: https://codepen.io/maciejkorsan/pen/BWLryj

Spójrz na mój kod to zrobić font size smaller do fit cokolwiek tam

Ale myślę, że to nie prowadzi do dobrego doświadczenia użytkownika

var containerWidth = $("#ui-id-2").width();
var items = $(".quickSearchAutocomplete .ui-menu-item");
var fontSize = 16;

items.each(function(){
    //display value depend sometimes on your case you may make it block or inline-table instead of inline-block or whatever value that make the div take overflow width
    $(this).css({"whiteSpace":"nowrap","display":"inline-block"});
    while ($(this).width() > containerWidth){
         console.log("$(this).width()"+ $(this).width() + "containerWidth" + containerWidth)
         $(this).css("font-size", fontSize -= 0.5);
    }
});

Mam nadzieję, że to ci pomoże

Zawsze miej swój element z tym atrybutem:

Javascript: element.style.fontSize = "100%";

Lub

CSS: style = "font-size: 100%;"

Gdy przejdziesz na Pełny ekran, powinieneś mieć już obliczoną zmienną scale (scale > 1 lub scale = 1). Następnie na pełnym ekranie:

document.body.style.fontSize = (scale * 100) + "%";

Jako zabezpieczenie JavaScript (lub jedyne rozwiązanie), możesz użyć mojej jQuery Scalem plugin , która pozwala skalować względem elementu nadrzędnego (kontenera), przekazując opcję reference.

W przypadku, gdyby było to pomocne dla kogokolwiek, większość rozwiązań w tym wątku polegała na owijaniu tekstu w wiele linii, w postaci e.

Ale potem znalazłem to i zadziałało:

Https://github.com/chunksnbits/jquery-quickfit

Przykładowe użycie:

$('.someText').quickfit({max:50,tolerance:.4})

Spróbuj użyć wtyczki fitText , Ponieważ rozmiar Viewport nie jest rozwiązaniem tego problemu. Wystarczy dodać bibliotekę

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script src="jquery.fittext.js"></script>

I zmienić rozmiar czcionki na poprawny przez ustawienie współczynnika tekstu:

$("#text_div").fitText(0.8);

Można ustawić max i min wartości tekstu:

$("#text_div").fitText(0.8, { minFontSize: '12px', maxFontSize: '36px' });

Dla tekstu dynamicznego, ta wtyczka jest bardzo przydatna http://freqdec.github.io/slabText/. Po prostu dodaj css

.slabtexted .slabtext
    {
    display: -moz-inline-box;
    display: inline-block;
    white-space: nowrap;
    }
.slabtextinactive .slabtext
    {
    display: inline;
    white-space: normal;
    font-size: 1em !important;
    letter-spacing: inherit !important;
    word-spacing: inherit !important;
    *letter-spacing: normal !important;
    *word-spacing: normal !important;
    }
.slabtextdone .slabtext
    {
    display: block;
    }

I skrypt

$('#mydiv').slabText();

Aby dopasować rozmiar czcionki do kontenera, a nie do okna zobacz funkcję resizeFont(), którą podzieliłem w tym pytaniu (kombinację innych odpowiedzi, z których większość jest już tutaj linkowana). Jest wyzwalany za pomocą window.addEventListener('resize', resizeFont);.

Vanilla JS: Zmiana rozmiaru czcionki-niesamowite, aby dopasować Pojemnik

JS:

function resizeFont() {
  var elements  = document.getElementsByClassName('resize');
  console.log(elements);
  if (elements.length < 0) {
    return;
  }
  _len = elements.length;
  for (_i = 0; _i < _len; _i++) {
    var el = elements[_i];
    el.style.fontSize = "100%";
    for (var size = 100; el.scrollHeight > el.clientHeight; size -= 10) {
      el.style.fontSize = size + '%';
    }
  }
}

Możesz użyć vw/vh jako zamiennika, więc dynamicznie przypisujesz em lub rem jednostki za pomocą javascript, upewniając się, że czcionki nie skalują się do okna jeśli javascript jest wyłączony.

Zastosuj klasę .resize do wszystkich elementów zawierających tekst, który chcesz przeskalować.

Uruchamia funkcję przed dodaniem detektora zdarzeń zmiany rozmiaru okna. Następnie każdy tekst, który nie pasuje do kontenera, zostanie zmniejszony podczas ładowania strony, a także po zmianie rozmiaru.

Uwaga: wartość domyślna font-size musi być ustawiona na:em,rem lub % w celu osiągnięcia odpowiednich rezultatów... a jeśli stylizacja Twoich elementów jest zbyt skomplikowana to przeglądarka może ulec awarii, jeśli zaczniesz gorączkowo zmieniać rozmiar okna.

To mi pomogło:

Staram się dobrać rozmiar czcionki na podstawie szerokości / wysokości uzyskanej z ustawienia font-size: 10px. Zasadniczo chodzi o to, " jeśli mam szerokość 20px i wysokość 11PX z font-size:10px, więc jaki byłby maksymalny rozmiar czcionki do obliczenia kontenera o szerokości 50px i wysokości 30px?"

Odpowiedzią jest system podwójnej proporcji:

{ 20:10=50:X, 11:10=30: Y } = { X= (10*50) / 20, Y= (10*30)/11 }

Teraz X to rozmiar czcionki, który będzie pasował do szerokości, Y to rozmiar czcionki, który dopasuje wysokość; przyjmuje najmniejszą wartość

function getMaxFontSizeApprox(el){
    var fontSize = 10;
    var p = el.parentNode;

    var parent_h = p.offsetHeight ? p.offsetHeight : p.style.pixelHeight;
    if(!parent_h)parent_h = 0;

    var parent_w = p.offsetHeight ? p.offsetWidth : p.style.pixelWidth;
    if(!parent_w)parent_w = 0;

    el.style.fontSize = fontSize + "px";

    var el_h = el.offsetHeight ? el.offsetHeight : el.style.pixelHeight;
    if(!el_h)el_h = 0;

    var el_w = el.offsetHeight ? el.offsetWidth : el.style.pixelWidth;
    if(!el_w)el_w = 0;

    //0.5 is the error on the measure that js does
    //if real measure had been 12.49 px => js would have said 12px
    //so we think about the worst case when could have, we add 0.5 to 
    //compensate the round error
    var fs1 = (fontSize*(parent_w + 0.5))/(el_w + 0.5);
    var fs2 = (fontSize*(parent_h) + 0.5)/(el_h + 0.5);

    fontSize = Math.floor(Math.min(fs1,fs2));
    el.style.fontSize = fontSize + "px";
    return fontSize;
}

NB: argument funkcji musi być elementem span lub elementem, który jest mniejszy niż jego rodzic, w przeciwnym razie jeśli dzieci i rodzic mają zarówno tę samą szerokość/wysokość funkcja zawiedzie

Nie widzę żadnej odpowiedzi w odniesieniu do właściwości CSS flex, ale może być również bardzo przydatna.

Proste zapytania o media wydają się prostszym i bardziej zrozumiałym rozwiązaniem do zmiany rozmiaru czcionki na podstawie rozmiarów kontenerów, które mogą być dynamiczne.

Poniższy tekst zmienia rozmiar czcionki do rozmiaru kontenera, niezależnie od tego, czy kontener jest skalowany do rozmiaru obszaru widokowego, czy osiągnął wartość maksymalną. Jeśli masz pojemniki o szerokości Nie 100%, możesz odpowiednio dostosować vw.

.container {
    width: 100%;
    max-width: 600px;
}
.headline {
    font-size: 20vw;
}
.subhead {
    font-size: 5vw;
}
@media (min-width:600px) {
    .headline {
        font-size: 120px;
    }
    .subhead {
        font-size: 32px;
    }
}

Użyj zmiennych CSS

Nikt jeszcze nie wspomniał o zmiennych CSS, a to podejście działało najlepiej dla mnie, więc:

Załóżmy, że masz kolumnę na swojej stronie, która jest 100% szerokości ekranu użytkownika mobilnego, ale ma max-width 800px, więc na pulpicie jest trochę miejsca po obu stronach kolumny. Umieść to na górze swojej strony:

<script> document.documentElement.style.setProperty('--column-width', Math.min(window.innerWidth, 800)+'px'); </script>

I teraz możesz użyć tej zmiennej (zamiast wbudowanej jednostki vw), aby ustawić rozmiar czcionki. Np.

p {
  font-size: calc( var(--column-width) / 100 );
}

To nie czyste podejście CSS, ale jest dość blisko.

Jeśli problemem jest zbyt duża czcionka na panoramicznym pulpicie, myślę, że najprostszą metodą css byłoby coś takiego (zakładając, że wrapper max 1000px wide)

.specialText{
    font-size:2.4vw;
}

@media only screen and (min-width: 1000px) {
    .specialText {
        width:24px;
    }
}

Jest więc automatyczny rozmiar dla każdego ekranu mniejszego niż maksymalna szerokość kontenera i stały rozmiar, gdy ekran jest szerszy (jak praktycznie wszystkie komputery stacjonarne/laptopy)