Molti studenti di web design reattivo hanno difficoltà a utilizzare le percentuali per i valori di larghezza. In particolare, c'è confusione con il modo in cui il browser calcola tali percentuali. Di seguito troverai una spiegazione dettagliata di come funzionano le percentuali per i calcoli della larghezza in un sito web reattivo.
Utilizzo dei pixel per i valori di larghezza
Quando usi pixel come valore di larghezza, i risultati sono molto semplici. Se usi CSS per impostare il valore della larghezza di un elemento nell'intestazione di un documento a 100 pixel di larghezza, quell'elemento sarà il stessa dimensione di quella impostata su 100 pixel di larghezza nel contenuto del sito Web o nel piè di pagina o in altre aree della pagina. I pixel sono un valore assoluto, quindi 100 pixel sono 100 pixel indipendentemente da dove appare un elemento nel documento. Sfortunatamente, sebbene i valori dei pixel siano facili da capire, non funzionano bene con i siti Web responsive.
Ethan Marcotte ha coniato il termine
"responsive web design", spiegando questo approccio come contenente 3 principi chiave:- Una griglia fluida
- Mezzi fluidi
- Query sui media
Questi primi due punti, una griglia fluida e supporti fluidi vengono ottenuti utilizzando percentuali, anziché pixel, per i valori di dimensionamento.
Utilizzo delle percentuali per i valori di larghezza
Quando utilizzi le percentuali per stabilire la larghezza di un elemento, la dimensione effettiva visualizzata da quell'elemento varia a seconda della posizione in cui si trova nel documento. Le percentuali sono un valore relativo, il che significa che la dimensione visualizzata è relativa ad altri elementi nel documento.
Ad esempio, se imposti la larghezza di an Immagine al 50%, ciò non significa che l'immagine verrà visualizzata a metà della sua dimensione normale. Questo è un malinteso comune.
Se un'immagine è effettivamente larga 600 pixel, l'utilizzo di un valore CSS per visualizzarla al 50% non significa che sarà larga 300 pixel nel browser web. Questo valore percentuale viene calcolato in base all'elemento che contiene quell'immagine, non alla dimensione effettiva dell'immagine stessa. Se il contenitore (che potrebbe essere una divisione o un altro elemento HTML) è largo 1000 pixel, l'immagine verrà visualizzata a 500 pixel poiché quel valore è il 50% della larghezza del contenitore. Se l'elemento contenitore è largo 400 pixel, l'immagine verrà visualizzata solo a 200 pixel, poiché quel valore è il 50% del contenitore. L'immagine qui in questione ha una dimensione del 50% che dipende completamente dall'elemento che la contiene.
Ricorda, il design reattivo è fluido. I layout e le dimensioni cambieranno man mano che dimensioni dello schermo/cambiamenti del dispositivo. Se ci pensi in termini fisici, non web, è come avere una scatola di cartone che stai riempiendo di materiale da imballaggio. Se dici che la scatola dovrebbe essere riempita per metà con quel materiale, la quantità di imballaggio necessaria varierà a seconda delle dimensioni della scatola. Lo stesso vale per le larghezze percentuali nel web design.
Percentuali basate su altre percentuali
Nell'esempio immagine/contenitore, abbiamo utilizzato i valori dei pixel per l'elemento contenitore per mostrare come sarebbe stata visualizzata l'immagine reattiva. In realtà, l'elemento contenitore verrebbe impostato anche come percentuale e l'immagine, o altri elementi, all'interno di quel contenitore, otterrebbero i loro valori basati su una percentuale di una percentuale.
Ecco un altro esempio.
Supponiamo che tu abbia un sito Web in cui l'intero sito è contenuto all'interno di una divisione con una classe di "contenitore" (una pratica comune di web design). All'interno di quella divisione ci sono altre tre divisioni che eventualmente modellerai per visualizzare come 3 colonne verticali.
Ora puoi usare CSS per impostare la dimensione di quella divisione "contenitore" per dire 90%. In questo esempio, la divisione del contenitore non ha un altro elemento che la circonda oltre al corpo, che non abbiamo impostato su alcun valore specifico. Per impostazione predefinita, il corpo verrà visualizzato come 100% della finestra del browser. Pertanto, la percentuale della divisione "contenitore" sarà basata sulla dimensione della finestra del browser. Man mano che la finestra del browser cambia di dimensione, cambierà anche la dimensione di questo "contenitore". Quindi, se la finestra del browser è larga 2000 pixel, questa divisione verrà visualizzata a 1800 pixel. Questo è calcolato come il 90% di 2000 (2000 x 0,90 = 1800)), che è la dimensione del browser.
Se ciascuna delle divisioni "col" trovate all'interno del "contenitore" è impostata su una dimensione del 30%, ciascuna di esse avrà una larghezza di 540 pixel in questo esempio. Questo è calcolato come il 30% dei 1800 pixel che il contenitore esegue il rendering (1800 x .30 = 540). Se cambiassimo la percentuale di quel contenitore, queste divisioni interne cambierebbero anche nelle dimensioni in cui vengono visualizzate poiché dipendono da quell'elemento contenitore.
Supponiamo che le finestre del browser rimangano a 2000 pixel di larghezza, ma cambiamo il valore percentuale del contenitore all'80% anziché al 90%. Ciò significa che ora verrà visualizzato a 1600 pixel di larghezza (2000 x .80 = 1600). Anche se non cambiamo il CSS per la dimensione delle nostre 3 divisioni “col” e le lasciamo al 30%, lo faranno renderizzare in modo diverso ora poiché il loro elemento contenitore, che è il contesto in cui sono dimensionati, ha cambiato. Queste 3 divisioni ora verranno visualizzate con una larghezza di 480 pixel ciascuna, che è il 30% di 1600 o la dimensione del contenitore 1600 x .30 = 480).
Andando ancora oltre, se ci fosse un'immagine all'interno di una di queste divisioni "col" e quell'immagine fosse ridimensionata usando una percentuale, il contesto per il suo dimensionamento sarebbe il "col" stesso. Poiché quella divisione "col" cambiava di dimensioni, anche l'immagine al suo interno cambiava. Quindi, se la dimensione del browser o del "contenitore" cambiasse, ciò influenzerebbe le tre divisioni "col", che, a loro volta, modificare la dimensione dell'immagine all'interno del "col." Come puoi vedere, questi sono tutti collegati quando si tratta di dimensionamento basato sulla percentuale valori.
Quando si considera come verrà visualizzato un elemento all'interno di una pagina Web quando viene utilizzato un valore percentuale per la sua larghezza, è necessario comprendere il contesto in cui tale elemento risiede nel markup della pagina.
In sintesi
Le percentuali giocano un ruolo fondamentale nella creazione del layout per i siti web responsive. Sia che tu stia ridimensionando le immagini in modo reattivo o utilizzando larghezze percentuali per creare una griglia veramente fluida le cui dimensioni sono relativi tra loro, la comprensione di questi calcoli sarà necessaria per ottenere l'aspetto che desideri desiderio.