Sto avendo difficoltà a capire il ridimensionamento dei caratteri.
Attualmente ho questo sito con un corpo font-size
del 100%. 100% di cosa però? Questo sembra calcolare 16 pixel.
Avevo l'impressione che il 100% si riferisse in qualche modo alla dimensione della finestra del browser, ma a quanto pare no, perché è sempre 16 pixel sia che la finestra sia ridimensionata a una larghezza mobile o a un desktop widescreen completo.
Come posso fare in modo che il testo sul mio sito sia in scala rispetto al suo contenitore? Ho provato ad usare em
, ma anche questo non scala.
Il mio ragionamento è che cose come il mio menu diventano schiacciate quando si ridimensiona, quindi ho bisogno di ridurre il px
font-size
di .menuItem
tra gli altri elementi in relazione alla larghezza del contenitore. (Per esempio, nel menu su un grande desktop, 22px
funziona perfettamente. Scendi alla larghezza del tablet e 16px
è più appropriato).
Sono consapevole che posso aggiungere punti di interruzione, ma voglio davvero che il testo si ridimensioni come bene avere punti di interruzione extra, altrimenti mi ritroverò con centinaia di punti di interruzione per ogni 100 pixel di diminuzione della larghezza per controllare il testo.
EDIT: Se il contenitore non è il corpo I trucchi CSS coprono tutte le tue opzioni in Fitting Text to a Container.
Se il contenitore è il corpo, quello che stai cercando è Viewport-percentage lengths:
Le lunghezze in percentuale del viewport sono relative alla dimensione del blocco iniziale contenente. Quando l'altezza o la larghezza del blocco di contenimento iniziale viene modificata, esse vengono scalate di conseguenza. Tuttavia, quando il valore di overflow sull'elemento radice è auto, si presume che qualsiasi barra di scorrimento non esista.
I valori sono:
vw
(% della larghezza della finestra)vh
(% dell'altezza della finestra)vi
(1% della dimensione della finestra nella direzione dell'asse in linea dell'elemento radice)vb
(1% della dimensione della finestra in direzione dell'asse del blocco dell'elemento radice)vmin
(il più piccolo di vw
o vh
)vmax
(il più grande o vw
o vh
)1 v* è uguale all'1% del blocco contenente iniziale.
L'utilizzo è simile a questo:
p {
font-size: 4vw;
}
Come potete vedere, quando la larghezza del viewport aumenta, lo stesso fa il font-size, senza bisogno di usare media queries.
Questi valori sono un'unità di misura, proprio come px
o em
, quindi possono essere usati per dimensionare anche altri elementi, come larghezza, margine o padding.
Il supporto dei browser è abbastanza buono, ma probabilmente avrai bisogno di un fallback, come:
p {
font-size: 16px;
font-size: 4vw;
}
Controlla le statistiche di supporto: http://caniuse.com/#feat=viewport-units.
Inoltre, controlla CSS-Tricks per uno sguardo più ampio: Viewport Sized Typography
Ecco un bell'articolo su come impostare le dimensioni minime/massime ed esercitare un po' più di controllo sulle dimensioni: Controllo preciso sulla tipografia reattiva
E qui c'è un articolo su come impostare le dimensioni usando calc() in modo che il testo riempia la finestra: http://codepen.io/CrocoDillon/pen/fBJxu
Inoltre, si prega di visualizzare questo articolo, che utilizza una tecnica soprannominata 'molten leading' per regolare anche l'altezza delle linee. Molten Leading in CSS
100% è relativo alla dimensione di base del carattere, che, se non l'hai impostato, sarebbe il default del browser.
Per ottenere l'effetto che stai cercando, userei un pezzo di codice JavaScript per regolare la dimensione di base del carattere in relazione alle dimensioni della finestra.
All'interno del tuo CSS, prova ad aggiungere questo nella parte inferiore cambiando la larghezza di 320 pixel per qualsiasi punto in cui il tuo design inizia a rompersi:
@media only screen and (max-width: 320px) {
body { font-size: 1em; }
}
Poi date il font-size in "px" o "em" come volete.