ridimensionare automaticamente immagini e testo
È ormai impossibile progettare un sito web senza tener conto che una percentuale significativa dei propri visitatori usa dispositivi mobili, dunque schermi di ridotte dimensioni.
ridimensionare immagini
Un aspetto problematico può essere rappresentato da immagini troppo grandi per uno schermo piccolo come quello di uno smartphone.
La soluzione è abbastanza semplice, senza javascript, usando css con un codice pulito ed essenziale: basta dichiarare
img.resizable {max-width: 100%; height: auto; width: auto\9; /* ie8 */}.
Potete averne una demo ridimensionando questa pagina.
ridimensionare testo
Non avrebbe senso ridimensionare il testo prevalente in una pagina, che deve restare leggibile (appunto per questo si specifica un viewport, che altrimenti verrebbe annullato nella sua utilità).
Può invece aver senso ridimensionare un testo particolarmente grosso, che visualizzato sullo schermo di un cellulare costringerebbe a usare lo scorrimento orizzontale per visualizzarlo tutto.
Anche qui il codice sorgente è css, pulito e sobrio: .textresizable {font-size: 7.0vw)}. Lo applichiamo al seguente testo:
testo grosso
Provate a ridimensionare la finestra del browser e il testo si ridimensionerà docilmente.
Maggiori dettagli su CSS-tricks.
🛒 ricerche / acquisti
cerca libri su Amazon sul tema: resize text resize image responsive web design media queries e-book e-reader ereader Kindle Kobo computer PC hardware software sistema operativo linux Apple cultura libri on-line ridimensionare automaticamente immagini e testo .