jak zmienić rozmiar czcionki proporcjonalnie do zmiany rozmiaru okna w CSS3 lub javascript

Question

Zrobiłem trochę aplikacji internetowej i mam jakiś problem z wielkości czcionki. Jak zmienić rozmiar czcionki proporcjonalnie do rozmiaru zmiany okna w CSS3 lub javascript?

Answer 1

Masz 3 sposoby, aby to zrobić:

1. Korzystanie http://fittextjs.com/, ale strony mogą zacząć być wolniejsze
2. mediów posługujących odpytuje
3. Korzystanie EMS

Teraz zależy to od jaki chcesz być końcowym rezultatem. Poszedłbym do opcji nr 3.

Answer 2

Ustaw rozmiar czcionki bazowej (ten można zdefiniować dla elementu body w CSS) w px wtedy wszędzie w pozostałej części strony zestaw czcionek rozmiary w stosunku do tej jednej z wykorzystaniem em jednostkę, a następnie można użyć zapytań o media do zmian rozmiary czcionek wszystkich stron po prostu zmieniając czcionki bazowej, coś takiego:

body { 
    font-size: 15px; 
} 
@media (max-width: 1000px) { 
    body { font-size: 1.3em; } 
} 
@media (max-width: 500px) { 
    body { font-size: 1.1; } 
} 

Answer 3

idealnym sposobem na to jest za pomocą urządzenia vw, który jest zdefiniowany jako 1/100th szerokości rzutni (stąd nazwa). Tak więc, na przykład, jeśli chcesz tekst będzie 4,5% szerokości przeglądarki w każdym czasie, można użyć rozmiaru:

font-size: 4.5vw; 

... i teoretycznie, że powinno działać. Niestety, okaże się, że nie działa on zgodnie z oczekiwaniami: jest błąd w przeglądarkach WebKit (przynajmniej), w którym wartość rozmiaru czcionki nie jest aktualizowana na żywo (chociaż jest tak dla wszystkich innych wymiarów). Musisz wywołać repaint w celu rozmiaru czcionki na zmiany, które mogą być wykonywane przez aktualizację właściwość z-index z javascript:

window.addEventListener('resize', function(){ 
    document.getElementById('myEl').style.zIndex = '1'; 
}, false); 

To może stworzyć trochę choppiness, ale to oznacza, że ​​nie musisz obliczyć rzeczywiste wymiary w JavaScript, i nie musisz używać "schodkowych" rozmiarów, jak w przypadku zapytań o media.

Answer 4

Idealnym sposobem na to jest połączenie zapytań VW-Size i @media. Powody są:

1) em sobie nie będzie przeskalować przez rozmiaru okna

2) VM na sam będzie zbyt mały dla rozdzielczości ekranów/niższy niż 800px.

więc właściwa droga do osiągnięcia tego celu jest:

• Zdefiniuj klasę - prop-tekst z VM = 1,0 do żądanej szerokości ekranu
• Dodaj zapytań o media, aby dopasować rozmiar czcionki z żądanego siatki o mniejszej rozdzielczości.

Dla mojego reagującego siatką (która ustawia kolumnę do podjęcia 100% szerokości poniżej 768px szerokości 1/2) Wygląda na to, że:

<style> 
    .prop-text{font-size:1.0vw} 
    @media (max-width : 768px) { 
    .prop-text{font-size:2.0vw} 
    } 
    /*other media queries here - fit font size to smartphone resolutions */ 
</style> 

<div class="prop-text">your text is here</div>