Calcolatore della dimensione fluida del testo

Definire la transizione dimensionale

1. Inserisci larghezze del viewport più piccole e più grandi in CSS pixel, ad almeno 100px l'una dall'altra, e la dimensione del carattere per ciascuna larghezza. Le dimensioni possono aumentare, diminuire o rimanere costanti. Indicare i pixel CSS presunti per rem.
2. Esaminare la dichiarazione corrente e la tabella dell'endpoint. Modificare la larghezza di prova del modello per ispezionare un altro punto; questo cambia il campione del modello senza modificare CSS copiato o fingere che la carta sia una finestra.
3. Copia CSS e testalo su un elemento non root nella pagina ricevente. La dimensione effettiva della radice, il viewport, il carattere e il comportamento dello zoom sono importanti. Il rifiuto degli Appunti consente di selezionare manualmente la stessa dichiarazione.

Comprendi l'espressione

La calcolatrice divide la differenza font-size per la differenza di larghezza della finestra per ottenere una pendenza. Moltiplica la pendenza per 100 per il termine vw, quindi converte l'offset e i limiti della dimensione numerica in rem utilizzando la radice presunta.

Piccoli e grandi descrivono le larghezze del viewport, non necessariamente le dimensioni dei caratteri. Un progetto decrescente utilizza un coefficiente di visualizzazione negativo con limiti clamp ordinati numericamente. Dimensioni di carattere uguali producono una dichiarazione rem costante più semplice.

I coefficienti sono arrotondati a sei decimali; i valori esattamente a metà sono arrotondati lontano da zero. La tabella e il campione usano i coefficienti copiati e possono differire leggermente dall’interpolazione ideale. I risultati in pixel mostrano tre decimali e segnalano gli arrotondamenti.

La dimensione radice è un’ipotesi usata per la conversione. Una radice diversa nella pagina di destinazione può cambiare i limiti del testo e le larghezze di transizione. rem si riferisce alla radice del documento e vw al viewport; modificare larghezza o carattere di un normale div non li simula.

Esempi crescenti, decrescenti e arrotondati

Il design predefinito utilizza 16px con un viewport di 320px e 32px con 1600px, presupponendo una radice di 16px. Produce clamp(1rem, calc(0.75rem + 1.25vw), 2rem), con una dimensione modellata di esattamente 24px a 960px.

L'inversione di tali dimensioni dell'endpoint produce clamp(1rem, calc(2.25rem - 1.25vw), 2rem). Entrambi i limiti rimangono ordinati numericamente. Inserendo 20px su entrambe le larghezze si produce invece font-size: 1.25rem; sotto la stessa presunta radice.

Per 17px a 360px e 23px a 1280px, i coefficienti arrotondati a sei decimali producono 17,0000024px alla prima larghezza e 20,0000028px al punto medio del modello copiato. La tabella arrotonda questi valori e non afferma che gli estremi siano raggiunti esattamente.

Limiti di creazione e modello

Le larghezze del viewport sono numeri interi compresi tra 240 e 3840 CSS pixel, distanti almeno 100px. Le dimensioni dei caratteri sono 1–256 CSS pixel e le dimensioni della radice presunta sono 8–32 CSS pixel per rem, con un massimo di due decimali. Segni, unità nei campi, raggruppamenti, esponenti e precisione eccessiva vengono rifiutati anziché corretti silenziosamente.

Lo strumento crea una dichiarazione font-size per un elemento diverso dalla radice, con rem e vw. Non importa CSS arbitrario, non crea una scala tipografica, non usa unità contenitore, non carica font e non modifica gli stili della radice. Il limite di errore riguarda il modello aritmetico finito, non la rasterizzazione del browser.

Il campione usa la dimensione calcolata in pixel e va a capo nella scheda. Non simula un viewport e non dimostra che il CSS avrà lo stesso risultato sulla pagina. Font, radice, viewport e precisione del browser possono cambiare il risultato.

rem misti e unità viewport non dimostrano automaticamente il ridimensionamento del testo accessibile. Testa la pagina ricevente con il testo del browser e le impostazioni di zoom. Lo strumento non fornisce alcun badge WCAG universale, promessa di corrispondenza pixel fissa o raddoppio garantito del carattere con uno zoom del 200%.

Authoring numerico locale senza impostazioni salvate

Lo strumento non carica valori, richiede font remoti, salva bozze, crea link con impostazioni o aggiunge telemetria con i valori. La copia è avviata dall’utente. Servizi esistenti, estensioni e copie conservate non sono coperti da una promessa universale di riservatezza o cancellazione.