-
Ciao
-
mi chiamo Nivesh
-
e sono uno sviluppatore
di Google Web Designer.
-
In questo video ti mostrerò come
creare layout flessibili utilizzando
-
le unità percentuali per
la posizione e le dimensioni.
-
Per iniziare, questo è
un documento di esempio
-
in cui tutti gli elementi utilizzano
i pixel per la posizione e le dimensioni.
-
Se visualizzo un'anteprima
di questo file nel browser e
-
ridimensiono la finestra del browser
-
noterai che il layout
non viene aggiornato.
-
Gli elementi posizione
e dimensioni restano fissi.
-
Possiamo utilizzare il layout
percentuale per cambiare le cose.
-
Se vuoi che il contenitore
della pagina principale si
-
adatti alle dimensioni dello schermo
-
fai clic sul pulsante Adatta
al viewport nel riquadro delle Proprietà.
-
Questo imposterà
l'altezza e la larghezza al 100%.
-
Ora le dimensioni della pagina
-
si adatteranno a quelle dello schermo.
-
Puoi anche modificare i valori
sinistra, in alto, larghezza e altezza
-
di ogni singolo elemento.
-
Faccio clic sul div giallo, qui
-
e modifico i valori
sinistra, in alto, larghezza e altezza
-
facendo clic sulla sezione
delle unità dei controlli e
-
passo a utilizzare le percentuali.
-
Puoi anche selezionare più elementi
-
e modificare tutte le loro posizioni e
dimensioni per utilizzare le percentuali.
-
Seleziono questi tre elementi qui sotto
-
e modifico sinistra, in alto, larghezza
e altezza per utilizzare le percentuali.
-
Come vedi, ora i singoli valori
-
sinistra, in alto, larghezza e
altezza utilizzano le percentuali.
-
Potresti volere che la
-
larghezza e l'altezza
di un elemento restino fisse
-
ma che la sua posizione si aggiorni quando
-
le dimensioni dello schermo cambiano.
-
Modifico i valori sinistra
e in alto dell'elemento Logo
-
in modo che utilizzino le percentuali
-
ma lascio che la larghezza
e l'altezza utilizzino i pixel.
-
Guardiamo un'anteprima nel browser.
-
Come hai visto, ho
ridimensionato il browser e
-
gli elementi ora scorrono con la viewport.
-
Un modo semplice per
creare questi layout flessibili
-
consiste nell'utilizzare
l'apposita opzione
-
nella barra delle opzioni
degli strumenti di selezione.
-
Passo a un altro
-
file in cui non c'è un layout percentuale
-
impostato per questi tre elementi
-
quindi questi elementi
utilizzano ancora i pixel.
-
Ora ti mostro la differenza se il layout
-
flessibile è selezionato o meno
-
in questo caso lo deseleziono.
-
Seleziono questi tre elementi
-
e li allineo verticalmente
al centro del contenitore principale
-
e li distanzio orizzontalmente
in modo uniforme dal loro
-
contenitore principale.
-
Vediamo l'anteprima.
-
Come vedi
-
gli elementi non si adattano
-
quando ridimensiono
la finestra del browser
-
ma restano dove li ho allineati.
-
Questo perché
-
se il layout flessibile non è selezionato,
-
la posizione e le dimensioni vengono
-
regolate in modo definitivo
-
ma se faccio clic
sull'opzione layout flessibile
-
e applico nuovamente le
impostazioni di allineamento
-
Allinea: al centro verticalmente
e Spazia orizzontalmente, quindi
-
visualizzo l'anteprima nel browser.
-
Selezionando l'opzione layout flessibile,
-
ho creato un allineamento percentuale
-
che mantiene gli
elementi relativamente allineati
-
al contenitore principale e tra di loro
-
quando le dimensioni
del contenitore cambiano.
-
Questo è tutto per questo video.
-
Grazie per averlo guardato!
