Molti studenti di progettazione web reattiva hanno difficoltà a utilizzare le percentuali per i valori di larghezza. Nello specifico, 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.
Uso dei pixel per i valori di larghezza
Quando si utilizzano i pixel come valore di larghezza, i risultati sono molto semplici. Se si utilizza il CSS per impostare il valore della larghezza di un elemento nell'intestazione di un documento con una larghezza di 100 pixel, quell'elemento avrà le stesse dimensioni di uno impostato su 100 pixel di larghezza nel contenuto o nel piè di pagina del sito Web o in altre aree del pagina. I pixel sono un valore assoluto, quindi 100 pixel sono 100 pixel, indipendentemente da dove nel documento appare un elemento. Sfortunatamente, mentre i valori dei pixel sono facili da capire, non funzionano bene con i siti Web reattivi.
Ethan Marcotte ha coniato il termine "responsive web design", spiegando questo approccio come contenente 3 principal principali:
- Una griglia fluida
- Media fluidi
- Query multimediali
I primi due punti, una griglia fluida e il fluido sono ottenuti utilizzando percentuali, anziché pixel, per i valori di dimensionamento.
Utilizzo delle percentuali per i valori di larghezza
Quando si utilizzano le percentuali per stabilire una larghezza per un elemento, la dimensione effettiva visualizzata da tale elemento varia in base alla posizione in cui si trova nel documento. Le percentuali sono un valore relativo, ovvero la dimensione visualizzata è relativa ad altri elementi nel documento.
Ad esempio, se si imposta la larghezza di un'immagine al 50%, ciò non avviene significa che l'immagine verrà visualizzata a metà della sua dimensione normale. Questo è un malinteso comune.
Se un'immagine ha una larghezza nativa di 600 pixel, quindi utilizzare 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 nativa dell'immagine stessa. Se il contenitore (che potrebbe essere una divisione o qualche altro elemento HTML) è largo 1000 pixel, l'immagine verrà visualizzata a 500 pixel poiché tale valore è pari al 50% della larghezza del contenitore. Se l'elemento contenitore è largo 400 pixel, l'immagine verrà visualizzata solo a 200 pixel, poiché tale valore è pari al 50% del contenitore. L'immagine in questione ha una dimensione del 50% che dipende completamente dall'elemento che la contiene.
Ricorda, il design reattivo è fluido. Layout e dimensioni cambieranno al variare delle dimensioni dello schermo / dispositivo. Se ci pensi in termini fisici, non web, è come avere una scatola di cartone che stai riempiendo di materiale di imballaggio. Se dici che la scatola dovrebbe essere riempita per metà di 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 usato i valori dei pixel per l'elemento contenitore per mostrare come l'immagine reattiva sarebbe stata visualizzata. In realtà, l'elemento contenente sarebbe anche impostato come percentuale e l'immagine, o altri elementi, all'interno di quel contenitore, otterrebbero i loro valori in base a una percentuale di una percentuale.
Ecco un altro esempio che mostra questo in pratica.
Supponiamo che tu abbia un sito web in cui l'intero sito è contenuto in una divisione con una classe di "contenitore" (una pratica comune di progettazione web). All'interno di questa divisione ci sono altre tre divisioni che alla fine verranno visualizzate come 3 colonne verticali. L'HTML potrebbe essere simile a questo:
Ora, puoi usare i CSS per impostare la dimensione di quella divisione "contenitore" per dire il 90%. In questo esempio, la divisione contenitore non ha un altro elemento che lo circonda diverso dal corpo, che non abbiamo impostato su un valore specifico. Per impostazione predefinita, il corpo verrà visualizzato come il 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 dimensione, 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 90 percento di 2000 (2000 x .90 = 1800)), che è la dimensione del browser. Se ciascuna delle divisioni "col" trovata nel "contenitore" è impostata su una dimensione del 30%, in questo esempio ciascuna di esse sarà larga 540 pixel. Viene calcolato come il 30% dei 1800 pixel a cui il contenitore esegue il rendering (1800 x .30 = 540). Se cambiassimo la percentuale di quel contenitore, anche queste divisioni interne cambierebbero nella dimensione che rendono in quanto dipendono da quelle che contengono l'elemento. 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 renderà ora a 1600 pixel di larghezza (2000 x .80 = 1600). Anche se non cambiamo il CSS per la dimensione delle nostre 3 divisioni "col" e li lasciamo al 30%, ora renderanno il rendering in modo diverso poiché il loro elemento contenitore, che è il contesto da cui sono dimensionati, è cambiato. Quelle 3 divisioni ora verranno visualizzate con una larghezza di 480 pixel ciascuna, ovvero il 30% di 1600 o la dimensione del contenitore (1600 x .30 = 480). Prendendo questo ulteriormente, 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.Dato che la divisione "col" è cambiata di dimensioni, anche l'immagine al suo interno. Quindi, se la dimensione del browser o del "contenitore" cambiata, ciò influenzerebbe le tre divisioni "col", che a loro volta cambiano la dimensione dell'immagine all'interno del "col". Come puoi vedere, queste sono tutte collegato quando si tratta di valori dimensionali guidati dalla percentuale. Quando si considera come un elemento all'interno di una pagina Web verrà visualizzato quando viene utilizzato un valore percentuale per la sua larghezza, è necessario comprendere il contesto in cui tale elemento risiede nel markup della pagina. Le percentuali giocano un ruolo fondamentale nella creazione del layout per i siti Web reattivi. Che tu stia dimensionando le immagini in modo reattivo o utilizzando larghezze percentuali per creare una griglia veramente fluida, le cui dimensioni siano relative l'una all'altra, sarà necessario comprendere questi calcoli per ottenere l'aspetto che desideri. In sintesi
