Per visualizzare questo contenuto devi accettare di utilizzare i cookie.

MyDigitalia
il digitale usato seriamente

ridimensionare automaticamente immagini e testo

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.

immagine grande, da ridimensionare

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.

Per visualizzare questo contenuto devi accettare di utilizzare i cookie.