come modificare la dimensione del carattere in modo proporzionale alla dimensione della finestra della modifica in CSS3 o javascript

Question

Faccio alcune app Web e ho qualche problema con font-size. Come modificare la dimensione del font in proporzione alle dimensioni della finestra in CSS3 o javascript?

Answer 1

Hai 3 modi per farlo:

1. Uso http://fittextjs.com/, ma le pagine possono iniziare a essere più lento
2. L'utilizzo di supporti interroga
3. tramite EMS

Ora, dipende da quello che vuoi essere il tuo risultato finale. Vorrei andare all'opzione n. 3.

Answer 2

Impostare la dimensione di base (quella definita per il vostro elemento body in CSS) in px poi in tutto il resto del vostro carattere set di pagine dimensioni rispetto a quella con em unità, quindi è possibile utilizzare le media query al cambiamento le dimensioni dei caratteri di tutte le pagine con il solo cambio il tipo di carattere di base, qualcosa di simile:

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

Answer 3

il modo ideale per farlo è usare l'unità vw, che è definito come 1/100esimo della larghezza viewport (da qui il nome). Così, per esempio, se si voleva il testo al 4,5% della larghezza del browser in qualsiasi momento, è possibile utilizzare il formato:

font-size: 4.5vw; 

... e teoricamente, che dovrebbe funzionare. Sfortunatamente, lo scoprirai, non funziona come previsto: c'è un bug nei browser WebKit (almeno) in cui il valore per la dimensione del font non è live-update (sebbene sia per tutte le altre dimensioni). È necessario attivare un ridisegno in modo che la dimensione del carattere per cambiare, che può essere fatto aggiornando la proprietà z-index da JavaScript:

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

Questo può creare un po 'di increspature, ma significa che non è necessario calcolare le dimensioni effettive in JavaScript e non è necessario utilizzare dimensioni "gradinate" come con le query multimediali.

Answer 4

Il modo ideale per farlo è combinare tra le dimensioni del carattere VW e le query @media. Ragioni sono:

1) em per sé non riscalare dalla dimensione della finestra

2) vm per sé sarà troppo piccolo per risoluzioni/schermi inferiore 800px.

Quindi il modo giusto per raggiungere questo obiettivo è:

• definire una classe - prop-testo con VM = 1.0 per la larghezza dello schermo desiderata
• Aggiungi media query per adattare il font-size con il desiderato griglie a bassa risoluzione.

Per la mia griglia reattivo (che definisce una colonna 1/2 a prendere larghezza 100% al di sotto 768px di larghezza) sembra che:

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