Fino a poco tempo fa i play-out erano definiti in base alla creatività del designer, quindi designer ci dava una grafica, ci dava un progetto e noi dovevamo realizzarlo sulla base della sua creatività, delle sue, delle dimensioni che aveva deciso su come disporre gli elementi.

Ora però in realtà le cose sono molto più complesse, proprio perché le dimensioni dei dispositivi cambiano, ce ne sono tantissimi da prendere in considerazione.

Non c' è più solamente il desktop, quindi lo schermo del nostro pc da scrivania, ma ci sono chiaramente i tablet e i cellulari che hanno uno schermo molto più piccolo.

Quindi il designer chiaramente deve rivedere un pochettino e riposizionare gli elementi in base proprio alla dimensione del dispositivo che sta utilizzando l'utente.

Già abbiamo visto che possiamo posizionare gli elementi in base alla alla dimensione della Newport.

Possiamo utilizzare delle dimensioni flessibili, come ad esempio la dare larghezze, le dimensioni in percentuale, ma possiamo far sì che il layout l'organizzazione del nostro contenuto cambi proprio in base alla dimensione dello schermo.

Quindi, mentre una volta si utilizzava un layout statico, quindi il contenitore della nostra pagina aveva delle dimensioni fisse.

Quindi come questo esempio che vediamo, abbiamo una classe container che ha una larghezza fissa posizionata al centro tramite la proprietà margine zero auto.

Questa è una dimensione rigida, non ha nessuna adattabilità stringendo lo schermo, la larghezza del contenitore, essendo fissa, non si adatterà e quindi compariranno le barre orizzontali.

Quello che dobbiamo fare noi, invece per rendere layout responsive e quindi più adattivo in base al dispositivo utilizzato è utilizzare chiaramente delle dimensioni relative.

Quindi, come ad esempio utilizzare le percentuali, impostare una larghezza massima al posto di una larghezza minima e quindi poi rielaborare i contenuti, rielaborare la disposizione degli elementi tramite le media.

Qui Iris quindi già in questo esempio vediamo che la pagina lo scheletro chiaramente della pagina si presenta nello stesso modo sud-est hop.

Però andando a stringere la finestra il nostro contenitore non avrà più una larghezza fissa, ma avendo una larghezza in percentuale andrà a prendere solamente l'ottanta percento dello schermo.

E nel caso in cui il nostro device sia molto grande come quei schermi da scrivania molto molto grandi, tipo wide-screen, nel caso in cui siano molto molto larghi, andiamo a bloccare la larghezza massima ad una dimensione che rende comunque il contenuto ben leggibile, ben fruibile, quindi ad esempio mille centoquaranta, una misura piuttosto standard.

Anche in questo caso centriamo sempre il nostro contenitore con il margine zero auto.

Queste sono le le cose di base, quindi le regole che noi dobbiamo utilizzare per rendere il nostro layout responsive fin dallo scheletro.

Quello che ora dobbiamo imparare è imparare a utilizzare le media qui Iris, quindi tramite la media.

Quindi possiamo cambiare dinamicamente alcune proprietà, quindi i valori di alcune proprietà degli elementi che sono presenti in pagina.

Quindi, come funzionano le media qui Iris, la media qui Iris prevedono che si vada a specificare il tipo di media che l'utente sta utilizzando, solitamente immediati per screen.

Quindi uno schermo è però quando vivi.

È capitato magari di stampare una pagina web e vedere che il risultato della stampa era diverso rispetto alla finestra che stavate visualizzando.

In quel caso significa che c' erano delle media.

Qui Iris impostate su print.

Quindi sulla stampa ce ne sono anche altri, ma nel nostro caso ci interessa principalmente lo schermo.

Chiaramente.

Quello che invece è il cuore della media Keys è proprio le condizioni dentro le quali noi vogliamo andare ad agire.

Quindi solamente se si verificano queste condizioni che andremo a scrivere all'interno di queste parentesi.

Allora il codice CSS che è presente all'interno di questa media qui avrà effetto.

Se queste condizioni non sono soddisfatte, questo CSS non avrà alcun effetto.

Quindi, entrando nello specifico media typ si riferisce proprio alla tipologia di media.

Quindi tutte le opzioni sono all qualsiasi tipo di dispositivo print.

Come dicevamo poco fa, la stampa screen, lo schermo e speech si applica agli screen ryder al posto di expressions possiamo scrivere uno o più espressioni che definiscono in quali casi va attivata la regola, quindi, ad esempio quando lo schermo è più largo di qualcosa o più piccolo di qualcosa di una certa dimensione.

Infine, il codice CSS che scriviamo all'interno sarà scritto con la stessa sintassi che abbiamo utilizzato finora e andrà proprio a modificare qualche aspetto definito al di fuori di questa media.

Qui vediamo un esempio quindi in questo esempio stiamo targeted usando chiaramente lo schermo media screen e la larghezza minima di un device di quattrocento ottanta pixel.

Quindi che cosa significa una larghezza minima di quattrocento ottanta pixel significa un device largo dai quattrocento ottanta pixel in su, quindi più largo di quattrocento ottanta pixel in questi casi andiamo a cambiare il colore di sfondo del body impostando un colore Like rain.

Questo è chiaramente un esempio significa che da zero a quattrocento ottanta pixel, quindi uno schermo molto molto stretto avrà un altro colore di sfondo.

Dai quattrocento ottanta pixel in su avrà colore di sfondo verde.

Una cosa importante da non dimenticare mai quando vogliamo utilizzare le media qui affinché abbiano effetto, affinché riusciamo a vedere anche con gli Spector a vedere come funzionano se funzionano correttamente e andare ad aggiungere all'interno del nostro tag.

Ed questo meta è un meta newport che va praticamente ad indicare al nostro browser che la larghezza della nostra pagina del contenuto della nostra pagina deve essere impostata uguale alla larghezza del device che l'utente sta utilizzando e che la lo zoom iniziale della pagina deve essere impostato su una.

Quindi la pagina non deve essere zoomata.

Se questo meta mancasse come sicuramente vi sarà capitato aprendo una pagina con il cellulare trovereste tutto quanto stretto stretto e dovete zoomare per riuscire a vederlo.

Quindi questa è chiaramente una cosa molto scomoda, anche perché poi richiede di fare scrolla destra e sinistra per leggerle, magari una frase e questo noi non vogliamo che succeda.

Noi vogliamo che la pagina si apra già ben visibile anche sui cellulari e quindi è essenziale andare a inserire questo meta all'interno del tag cloud.

Che cosa possiamo fare con le medie aquile? Quindi abbiamo visto la sintassi.

Abbiamo visto che è importante è necessario andare a inserire il tag meta meta Newport.

Ma che cosa possiamo fare con le medie acquiring? Perché sono così utili? Perché, ad esempio, possiamo modificare la dimensione di un font.

Quindi se su un browser su se su un desktop il fronte molto grande perché stiamo inserendo un titolo molto grande sul cellulare? Chiaramente questo non sarà ben visibile.

Quindi possiamo ridurlo, eh? Possiamo togliere alcuni elementi non essenziali, quindi possiamo rimuoverli perché sul cellulare creerebbero solo un ingombro che darebbe fastidio.

Non arricchirebbe l'esperienza dell'utente.

Possiamo cambiare gli elementi.

Possiamo inserirne di nuovi.

Possiamo toglierne Possiamo modificare chiaramente la larghezza delle you out.

Abbiamo visto quindi la sintassi delle media qui abbiamo capito qual è lo scopo.

Ma nello specifico, che cosa possiamo fare con le medie qui? Perché sono così importanti? Perché, ad esempio, possiamo modificare la dimensione del font, Quindi se ad esempio sud-est abbiamo un titolo molto, molto grande sul cellulare.

Questo non sarà ben visibile, quindi, ad esempio possiamo diminuire la dimensione del pho ponte.

Possiamo togliere qualche elemento che non è essenziale che su cellulare magari disturberebbe l'esperienza dell'utente.

Possiamo cambiare gli elementi in base alle out.

Possiamo modificare chiaramente la larghezza del layout.

Come abbiamo visto, quindi le cose che si possono fare sono infinite.

Il limite Chiaramente la fantasia, soprattutto dei designer, è la cosa importante per noi sviluppatori è avere ben chiaro fin dall'inizio come sarà layout nei vari dispositivi per prendere in considerazione fin da subito tutti i vari contenuti e tutte le varie componenti della pagina, per non impazzire poi a doverle riadattare nei vari dei vari dispositivi.

Quindi quali dimensioni prendere in considerazione quindi nelle nostre media qui abbiamo detto che andiamo a impostare delle espressioni che di solito prendono in considerazione le dimensioni dello schermo.

Ma quali dimensioni dello schermo? Chiaramente i dispositivi sono tantissimi migliaia e ogni dispositivo potrebbe potenzialmente ave delle misure diverse.

Quello che si fa è cercare di standardizzare queste dimensioni.

Quindi ci sono delle misure consuete, diciamo quelle più utilizzate, che sono quelle che va a definire anche bootstrap che è un framework CSS molto, molto, molto utilizzato, molto famoso, che va proprio definì in questi break point li chiama lui, quindi punti di scambio di layout che sono delle misure effettivamente standard.

Quindi i break point che solitamente si utilizzano sono cinquecento settantasei pixel che va a indicare una dimensione di uno smartphone.

Settecento sessantotto pixel che è un tablet con L'orientamento Portrait, quindi l'orientamento verticale, novecento novantadue pixel che il tablet con orientamento Land Scape, quindi un tablet utilizzato in orizzontale.

E infine i milleduecento pixel che sono i pixel che solitamente si utilizzano per i desktop dei desktop in su, poi chiaramente desktop possono diventare veramente grandissimi.

Però quello che spesso si fa è comunque mantenere il contenuto della pagina concentrato sul centro, quindi tutto raggruppato al centro perché altrimenti devo spostare la testa da destra a sinistra.

Non è più così comodo leggere soprattutto le parti testuali.

È qui abbiamo riportato anche un link di tantissimi formati, risoluzioni di tantissimi device famosi.

Quindi qui c' è proprio una lista di tutti i device esistenti.

Notiamo la differenza fra la dimensione della newport e la risoluzione di un device, perché spesso i nostri cellulari sono full HD.

Quindi la risoluzione è millenovecento venti per mille ottanta.

Quello che però noi dobbiamo, quello su cui noi dobbiamo basarci non è tanto la risoluzione, ma è la dimensione in pixel dello schermo e quindi dobbiamo basarci su queste dimensioni.

Qui Qui Chiaramente la lista è lunghissima.

Si può cercare, si può filtrare, si può ordinare per altri altri fattori.

Quindi qui si può andare a spulciare veramente tutte le dimensioni possibili.

Noi ci baseremo principalmente su queste, quindi vediamo un esempio con le medie acquiring riprendiamo il nostro index html.

Abbiamo ripulito e abbiamo ripulito anche il nostro foglio di stile.

Abbiamo sempre mantenuto la regola di Reseda che va ad azzerare i margini.

Padding imposta il boxing Board box.

Quindi se ora, ad esempio, per fare il primo esempio, il più semplice volessimo dare al body un background-color, ad esempio Red, sappiamo che questo significa che la nostra pagina diventa rossa.

Ora con una media qui possiamo andare a cambiare, ad esempio il il colore dello sfondo.

Andiamo a scrivere media screen and max weed, ad esempio di settecento sessantotto pixel, che è la dimensione di un tablet verticale o un uno smartphone in orizzontale.

Quindi andiamo ad impostare questa questa media qui e all'interno di questa media.

Qui inseriamo il codice css che vogliamo che abbia effetto quando l'utente sta visualizzando la nostra pagina con un monitor con una larghezza massima di settecento sessantotto.

Che cosa significa? Significa che ha uno schermo piccolo inferiore ai settecento sessantotto pixel.

Quindi in questo caso se noi diamo ad esempio al body background-color green questo qui quando lo schermo sarà più grande di settecento sessantotto pixel avrà il colore rosso di sfondo.

Se però io comincio a stringere la finestra, a un certo punto il mio schermo diventa verde proprio perché sta entrando in gioco la mia media qui ieri quindi sotto i settecento sessantotto pixel vedrò lo schermo verde.

Quello che possiamo fare aiutandoci con crom è utilizzare autogol il device toolbar.

Quindi questa i concina qui ora possiamo anche chiudere, no? Sbagliato quello che possiamo fare, no? Rimettiamolo così.

Quello che possiamo fare con Crom è attivare il device Toolbar, che non è altro che un'impostazione per sviluppatori, che ci permette di visualizzare la nostra pagina come se fosse ad esempio un cellulare.

Qui vediamo in alto che ho una tendina.

Mi fa scegliere alcuni dei principali device qui adesso selezionato iphone sei o sette otto potrei selezionare ad esempio un ipad.

Questi concina qua mi permette anche di girare l'orientamento del device, quindi vediamo che questo è l'ipad orizzontale che è effettivamente questa dimensione più larga di settecento sessantotto pixel, mentre se lo metto in verticale questo corrisponde proprio con i settecento sessantotto.

Lo vedo qui qui vedo le dimensioni.

Volendo posso giocare anche con queste queste tab che sono gia' predisposte.

Ci sono delle misure standard oppure posso andare ad allargare e stringere a mano, quindi posso decidere io proprio i break point che che mi interessano.

Quindi già qui vediamo che le cose cambiano chiaramente.

Tutto questo è reso possibile proprio dal meta newport che è presente all'interno del tag ed qui noi ce l'abbiamo.

Già, perché visual studio code ce l'ha regalato quando abbiamo inserito con lo short food è la struttura base della html.

Quindi lui di default è andato già a inserirci questo meta newport proprio perché è essenziale per rendere la pagina responsive.

Se questo meta newport non ci fosse ora noi non potremmo vedere bene la nostra media qui in effetti vediamo che lo sfondo rimane sempre rosso non entra mai in gioco questa media qui con lo sfondo verde.

Quindi nonostante il mio schermo sia molto piccolo, quindi ad esempio duecento pixel, ad esempio, duecento pixel, rimane comunque rosso.

Questo succede proprio perché manca il Met a Newport.

Ora lo riattivi, siamo aggiorniamo la pagina e adesso torna ad essere verde.

Allarghiamo, superiamo i settecento sessantotto pixel e torna ad essere rosso.

Vediamo ora un altro esempio, un caso d'uso molto frequente con delle immagini.

Quindi commentiamo per un momento.

Questa queste regole che abbiamo scritto per il nostro body e andiamo a inserire ad esempio delle immagini.

Quindi creo un contenitore.

Assegniamo una classe a questo contenitore in modo da poterlo stilare.

Quindi, ad esempio, immagino all'interno di questo.

Vado a inserire due immagini.

Io ho già due immagini inserite all'interno della mia cartella.

Vado a utilizzare questa paperella marchiata boolean e un pc con un progetto.

Quindi due immagini che inizialmente voglio visualizzare affiancate.

Quindi ricordiamo che all'interno del nostro tributo src dobbiamo andare a inserire il percorso dell'immagine a partire dal file HTML all'interno del quale stiamo lavorando.

Quindi io qui ho kleenex che a fianco ha una cartella mg all'interno di questa cartella MG o le due immagini che voglio inserire.

Quindi nel percorso src vado a scrivere mg slash eh duck boolean punto jpg viso studio code riconosce i nomi dei file, quindi mi suggerisce l'auto completamento e qui possiamo scrivere bullock, la nostra paperella.

Inseriamo anche la seconda immagine che è sempre all'interno della cartella mg e questa immagine si chiama pc punto jpg e scriviamo pc.

Quindi un testo alternativo molto semplice.

Ora posizioniamo questi elementi tramite le direttive flex, quindi abbiamo creato il contenitore, quindi target izzo il mio contenitore tramite la classe a questo contenitore diamo un display flex e sappiamo che di default gli elementi si posizionano in riga.

Quindi se ora aggiorno la mia pagina togliamo anche il device albert, abbiamo le nostre due immagini.

Chiaramente queste immagini sono molto, molto, molto grandi.

Perché? Perché l'immagine originale è molto grande.

Quindi noi vogliamo far sì che queste immagini non non occupino così tanto spazio.

Non vogliamo vedere la barra di scorrimento orizzontale, quindi che cosa faremo? Creeremo una seconda regola css andando a prendere creeremo una seconda regola css andando a prendere le nostre immagini, quindi selezionando il contenitore immagino che è il contenitore delle immagini spazio mg, quindi un un selettore per gerarchia.

A queste immagini vogliamo dare ad esempio un tweet del cinquanta percento.

Quindi ora si aggiorna la pagina.

Le mie immagini rimangono contenute all'interno del contenitore e le vedo perfettamente affiancate, quindi occupano esattamente metà dello schermo della porzione di schermo visibile.

Se io allargo la finestra, chiaramente le mie immagini si ingrandiscono proprio perché hanno una dimensione fluida, una dimensione flessibile in percentuale.

Ora, se volessimo far sì che su uno schermo molto piccolo quindi ad esempio qui le le due immagini vadano una sotto all'altra perché viste piccoline, così si riesce poco a vedere il contenuto di queste immagini.

Potrei fare di nuovo una media qui.

Quindi, ad esempio sempre utilizzando la keyword screen, perché vogliamo che questa media qui si applichi sul nostro schermo e andiamo ad impostare una maxi wint di possiamo utilizzare sempre settecento sessantotto pixel, che è una misura standard per i cellulari.

Abbiamo visto che ci sono tantissimi break point, questi sono quelli più utilizzati.

Quindi ora che cosa vogliamo ottenere? Vogliamo far sì che le nostre immagini, anziché stare affiancate, vadano a finire una sotto all'altra.

E per fare questo abbiamo una cosa molto semplice da fare, che è riprendere la regola che abbiamo scritto poco fa per la larghezza delle immagini e anziché farle stare al cinquanta per cento le inseriamo al cento per cento.

Quindi significa che queste immagini prenderanno il cento per cento della larghezza del loro contenitore.

Quindi, tornando ad una dimensione di schermo, un pochettino più larga, la visualizzazione delle immagini è identica a prima.

Perché? Perché nella nostra media qui abbiamo impostato una maxi weed di settecento sessantotto pixel.

Significa che il il contenuto di questa media qui si applica solamente per gli schermi più piccoli di settecento sessantotto pixel.

Quindi, riprendendo lo schermo di una dimensione maggiore ai settecento sessantotto pixel, ora vediamo che le nostre immagini continuano ad essere affiancate.

Se però io stringo lo schermo, le immagini non saranno più al cinquanta percento.

Quando scendo sotto i settecento sessantotto pixel, le immagini prendono il cento percento del contenitore.

Ora però che cosa sta succedendo? Sta succedendo che la mia immagine è larga tanto quanto il contenitore, ma la seconda immagine sta a fianco.

Questo perché? Perché chiaramente dando una dimensione fissa del cento per cento, dobbiamo dire al nostro contenitore Flex che quando gli hai tema non ci stanno all'interno della sua larghezza vadano a capo e quindi per fare questo dobbiamo assegnare la proprietà Flex rap rap al contenitore delle nostre immagini.

Quindi ora, aggiornando la pagina, non abbiamo più la scuola barra orizzontale, ma vediamo che compare l'immagine esattamente sotto.

Quindi abbiamo le immagini una sotto all'altra.

Questo lo possiamo vedere anche chiaramente con il nostro toolbar.

Deve quindi su una dimensione di schermo molto grande.

Abbiamo sempre le due immagini affiancate metà e metà.

Man mano che stringiamo lo schermo, queste si rimpiccioliscono.

E quando arrivano ai settecento sessantotto pixel prendono la larghezza al cento percento del contenitore e vanno una sotto all'altra.