Arrivo un po 'in ritardo qui, non ne ricevo molto merito, sto solo facendo un mix delle risposte seguenti perché sono stato costretto a farlo per un progetto.
Quindi, per rispondere alla domanda: non esiste una proprietà come questa proprietà CSS . Non so perché, ma penso sia perché hanno paura di un abuso di questa proprietà, ma non trovo alcun caso d'uso in cui possa essere un problema serio.
Comunque, quali sono le soluzioni?
Due strumenti ci permetteranno di farlo: media queries e vw property
1) Esiste una soluzione "stupida" che consiste nel fare una media query per ogni passaggio che eseguiamo nel nostro css, cambiando font da un importo fisso a un altro importo fisso. Funziona, ma è molto noioso da fare e non hai un aspetto lineare liscio.
2) Come ha spiegato AlmostPitt, c'è una soluzione brillante per i minimi:
font-size: calc(7px + .5vw);
Il minimo qui sarebbe 7px in aggiunta allo 0,5% della larghezza della vista.
Questo è già molto interessante e funziona nella maggior parte dei casi . Non richiede alcuna media query, devi solo dedicare un po 'di tempo a trovare i parametri giusti.
Come hai notato è una funzione lineare, la matematica di base ti impara che due punti ti trovano già i parametri. Quindi aggiusta la dimensione del carattere in px che desideri per schermi molto grandi e per la versione mobile, quindi calcola se vuoi fare un metodo scientifico. Pensato, non è assolutamente necessario e puoi semplicemente provare.
3) Supponiamo che tu abbia un cliente molto noioso (come me) che vuole assolutamente che un titolo sia una riga e non di più. Se hai utilizzato la soluzione AlmostPitt, allora sei nei guai perché il tuo carattere continuerà a crescere e se hai un contenitore a larghezza fissa (come bootstrap che si ferma a 1140px o qualcosa del genere in grandi finestre). Qui ti suggerisco di utilizzare anche una media query. In effetti puoi semplicemente trovare la quantità massima di px size che puoi gestire nel tuo contenitore prima che l'aspetto diventi indesiderato (pxMax). Questo sarà il tuo massimo. Quindi devi solo trovare la larghezza esatta dello schermo che devi fermare (wMax). (Ti lascio invertire una funzione lineare da solo).
Dopodiché fallo
@media (min-width: [wMax]px) {
h2{
font-size: [pxMax]px;
}
}
Quindi è perfettamente lineare e la dimensione del tuo carattere smette di crescere! Si noti che non è necessario inserire la proprietà CSS precedente (calc ...) in una media query sotto wMax perché le media query sono considerate più importanti e sovrascriveranno la proprietà precedente.
Non penso sia utile fare uno snippet per questo, poiché avresti problemi a farlo a tutto schermo e dopotutto non è scienza missilistica.
Spero che questo possa aiutare gli altri e non dimenticare di ringraziare AlmostPitt per la sua soluzione.