è possibile dare delle dimensioni ai nostri tag nei nostri elementi della pagina web utilizzando le proprietà with White with.

Chiaramente sta per larghezza e hit per altezza.

Le unità di misura che si possono utilizzare.

Le principali che andremo a utilizzare noi saranno i pixel e il simbolo di percentuale.

I pixel chiaramente stanno ad indicare una dimensione fissa, quindi quanti pixel voglio che sia grande questo elemento? Il simbolo di percentuali invece, sta ad indicare una dimensione relativa al proprio contenitore, quindi la percentuale sta proprio a indicare.

Voglio che ad esempio questo div con quinto ottanta percento questo contenitore questo dive sia largo l'ottanta percento del suo Tang genitore.

Quindi sarà un pochettino più stretto rispetto al contenitore.

Vediamo un esempio Ripuliamo il nostro index è il nostro foglio di stile.

Andiamo a creare un DVD.

È importante notare che questo DVD non è visibile in pagina.

Anche se io andassi a inserire ad esempio un background-color red a questo div questo divano non ha dimensioni.

Perché? Perché abbiamo detto che il divo, un tag contenitore e non avendo nulla al suo interno non occupa alcuno spazio.

Quindi, andando in over su questo tag vediamo che compare questa specie di tool tip nella finestra che mi dà le dimensioni novecento quarantadue per zero novecento quarantadue è la larghezza per zero è l'altezza, quindi non altezza perché non ha alcun contenuto.

Se adesso all'interno di questo dive vado a inserire un testo quindi ad esempio il nostro amico lo remix um aggiorna la pagina e adesso, essendo che il divo ha del contenuto del testo, questo comparirà chiaramente con lo sfondo rosso.

Quindi se volessimo dare delle dimensioni a questo diva, questo contenitore é ad esempio abbiamo detto che possiamo utilizzare i pixel o le percentuali.

Quindi facendo un esempio cinquecento pixel di larghezza al giorno la pagina e vediamo che il contenitore adesso è un pochettino più stretto.

Lo vediamo perché è rappresentato da questo rettangolo rosso e il testo chiaramente si adegua al suo contenitore.

Quindi se il contenitore è più stretto il testo scende e va a capo.

Se impostiamo anche l'lte zza di questo dive, ad esempio mettiamo sempre cinquecento pixel anche in altezza, vediamo che si crea questo vero e proprio quadrato rosso.

Il testo chiaramente rimane allineato in alto perché il testo non riempie tutto il contenitore, però il contenitore a queste dimensioni.

Se a questo contenitore diamo una dimensione piccolina, quindi ad esempio dieci pixel in altezza che succede? Succede che il mio dvd eh piccolino? Perché è solamente questo rettangolo rosso e il testo chiaramente all'interno non ci sta.

Perché questa frase? Due frasi intere indici pixel chiaramente non ci possono stare, quindi succede che il testo sborsa da quindi esce in altezza rispetto al contenitore.

La larghezza chiaramente la rispetta, ma in altezza il testo non ci sta, quindi la cosa migliore che può fare è scendere e sborsare rispetto al contenitore.

Per ovviare a queste problematiche che cosa possiamo fare? Anziché impostare delle fisse possiamo utilizzare delle proprietà che sono min weed, max Weed, min hit e max hit, quindi questo ci permette di rendere il nostro layout piu' fluido più adattivo, sia rispetto al dispositivo, sia rispetto al al contenuto del del nostro tag.

Quindi se ad esempio anziché dare un'altezza fissa, diamo un'altezza minima al nostro contenitore che succede? Succede che se il contenitore a poco contenuto prenderà questa altezza minima, quindi potrebbe essere più alto rispetto al proprio contenuto.

Se invece il contenuto è molto più alto, molto più grande, cioè molto più testo ad esempio, il contenitore si adatterà al contenuto, quindi questa altezza minima è proprio un punto di partenza, ma se serve piu' spazio chiaramente se lo prende all'incontrario con la max hit.

Quindi la max hit non ha un'altezza minima di partenza, ma ha un'altezza massima e oltre quella altezza li' non andrebbe.

Lo stesso discorso vale chiaramente per la minuit e la maxi weed trasportato sulla larghezza.

Vediamo anche chi anche qui qualche esempio se prendo il mio dvd prima abbiamo detto che impostando un'altezza di dieci pixel il testo borda se anziché impostare una hit fissa imposto una mini hit, quindi un'altezza minima adesso il rettangolo rosso prende chiaramente tutta l'lte zza del testo perché io ho impostato un'altezza minima, quindi se il mio dvd è vuoto quindi non c' è alcun contenuto prendere l'altezza minima che io gli ho dato.

Se però all'interno del mio div c' è un lorem posso aggiungere anche ad esempio per tre per fare un test o un pochettino piu' lungo, quindi tre blocchi di lorem ipsum aggiorna la pagina e anche in questo caso chiaramente prende in altezza tutto lo spazio che gli serve.

Lo stesso discorso potrebbe essere per la suite quindi se con questa larghezza adesso cinquecento pixel è strettino, ma se io ne mettessi ottocento, ad esempio e poi andassi a stringere la mia finestra, succede che mi compaiono le barre di scorrimento orizzontali.

Questa è una cosa proprio da non fare nelle pagine web.

Quindi che cosa sta succedendo? Sta succedendo che io ho dato una dimensione fissa al mio contenitore in larghezza e quindi lui rimarrà sempre largo ottocento pixel.

Chiaramente se ottocento pixel nella pagina ci stanno, non ci saranno le barre di scorrimento.

Se però stavo visualizzando il mio sito web con un dispositivo con uno schermo più stretto, ottocento pixel non ci stanno.

Quindi per ovviare a questo problema anziché dare una suite di ottocento pixel posso ad esempio dare una maxi with di ottocento pixel.

Questo significa che ora se aggiorno la pagina io sto dicendo che questo contenitore può allargarsi al massimo di ottocento pixel.

Quindi se lo schermo è più piccolo chiaramente starà all'interno se lo schermo è più grande di ottocento pixel sarà al massimo ottocento pixel e poi ci sarà dello spazio bianco.

Come faccio a vedere le dimensioni del mio blocco? Lo vedo andando in over sul div compare sempre questo tool tip ottocento per cento otto ottocento e la larghezza cento otto all'altezza.

Quindi stringendo il mio schermo vado sempre in over sui miei elementi e questa volta, ad esempio la larghezza si centoventicinque.

Quindi non sto più imponendo una larghezza fissa ma una larghezza massima entro la quale il div deve stare.

Per vedere l'effetto della percentuale che cosa posso fare? Posso andare ad esempio a inserire una maxi weed che poi quella percentuale, essendo già la percentuale di per sé fluida c' è un pochettino meno differenza tra la suite fissa e la max with, quindi posso andare ad esempio impostare una weed di ottanta per cento commentiamo la riga precedente e quindi succede che il mio contenitore di sarà sempre l'ottanta percento rispetto al suo contenitore.

Il suo contenitore in questo caso è proprio il body.

Quindi rispetto alla larghezza dello schermo avrò sempre l'ottanta percento di larghezza, a prescindere da quanto largo è lo schermo, quindi questa è proprio una misura fluida.

Molto spesso infatti si combina una suite in percentuale con una maxi with fissa, quindi io posso dire voglio che il mio schermo sia il mio div sia l'ottanta percento dello schermo fino ad un massimo di, ad esempio ottocento pixel.

Quindi quando il mio monitor è tanto grande, comunque non diventa gigante il mio dvd, quindi in questo caso si ottiene una combinazione dei due.

Quindi io sto impostando una weed in percentuale però limitata da una larghezza massima, quindi dalla mia max winter che otto ottocento pixel.

Quindi se la mia finestra è molto più larga, vedrò che il mio dna è al massimo ottocento pixel e questa diventa una misura fissa.

Se però il mio schermo si riduce chiaramente il mio mio dvr non è più ottocento pixel si adatta e prende l'ottanta percento del suo contenitore.

C'è poi la possibilità di basare le dimensioni di un contenitore in base a il dispositivo che viene utilizzato.

Quindi si parla di Newport.

La newport è proprio la parte visibile da parte dell'utente di una pagina web é chiaramente dipende dal dispositivo utilizzato, quindi possiamo basarci anche sulle dimensioni della newport, nello specifico utilizzando la proprietà, la dimensione Newport weed, quindi la larghezza della Newport Newport che è l'altezza.

Quindi questo ad esempio è la Newport di di un test top.

Quindi la parte visibile del sito web su un desktop del sito di Buchan guardando lo stesso sito con un cellulare.

Chiaramente le dimensioni della Newport sono diverse e quindi anche quello che io vedo nella pagina è diverso.

Quindi come funzionano? Newport with Newport si iscrivono con questa sintassi, Quindi W V sta per Newport Tweet e V H sta per Newport.

Quindi una via eh c'è un'unità di misura corrisponde ad un uno percento di altezza della Newport.

Quindi, per basare la dimensione di un contenitore sull' LTE zza della Newport, se io volessi riempire ad esempio tutto lo schermo, a prescindere che sia un test top, un tablet o uno smartphone, posso usare la dimensione cento V H.

Ad esempio, in questo modo il mio contenitore prenderà tutta l'lte zza della newport, ossia dello schermo del dispositivo che viene utilizzato.

Questa è una misura fluida, quindi anche in questo caso, se cambia l'lte zza o cambia la larghezza della Newport.

Chiaramente le dimensioni del contenitore cambiano di conseguenza.

Vediamo un esempio togliamo il contenuto del nostro div e ritorniamo al nostro dive come Ground Color Red e impostiamo un'altezza.

Quindi ad esempio con un'altezza di cento V h succede che il mio div prende l'altezza dello schermo, quindi l'altezza del dispositivo.

Vedo che modificando la dimensione della finestra, quindi io sto alzando e riducendo proprio i strumenti per lo sviluppatore.

Vedo che il mio contenitore tv prende tutta l'lte zza visibile.

C' è un piccolissimo scroll verticale che corrisponde alla cornice bianca che sta intorno al div é questo capiremo come toglierlo.