Ok, è arrivato il momento della prova del nove.

Vediamo come il nostro sito si vede da mobile.

Finora abbiamo lavorato in ottica stop first, quindi abbiamo sviluppato tutto su un layout che rende utilizzasse su diciamo un minimo di mille ventiquattro milleduecento pixel di ampiezza.

Vediamo come si comporta a risoluzioni più contenute più ristrette quindi come dei mobili tablet.

Quello che può fare chrome in questo momento per aiutarci è utilizzare il tuo gol dei device, che è una sorta di simulazione con cui possiamo mimare i newport di altri device.

Quindi lascio la consola aperta, apro è clicco appunto su questo strumento e vediamo come già cambia la schermata in questo momento vediamo come nella propria in questa toolbar ci indica che è selezionata la modalità responsive, quindi sostanzialmente ceh questa questa endor con cui posso gestire, cioè posso cambiare in maniera fluida la la dimensione del newport e vediamo come stringendo qualcosa comincia a non andare più a posto.

Vediamo come il testo si accavalla, i menu si rompono il testo anche molto più grande di quanto potrebbe essere.

Le immagini vediamo escono fuori, vanno in così nel cosiddetto overflow e che altro ancora Beh sì, c' è un po' da sistemare anche la sezione About, quindi proviamo a come cominciamo ad applicare un po' di correttivi.

Vediamo quindi i miglioramenti che potremmo applicare una risoluzione come quella di un iPhone iPhone dieci, un iPhone con una risoluzione di tre e settantacinque, come ci indica qui la la nostra toolbar.

Quindi applichiamo cominciando ad applicare delle media qui.

Io partirei subito da quelle più immediate, cioè quelle che riguardano la tipografia e che possiamo già ricavare dal nostro design, perché tornando sul nostro fig.

Ma vediamo che nella style and iniziale che abbiamo utilizzato per stilare il design system, quello base, quindi tutta la tipografia, i pulsanti e Linc, abbiamo anche le varianti mobile è della della tipografia dei vari elementi.

Quindi io potrei sfruttare già quello che il design mi ha offerto per cominciare a stabilire delle medie a cui precise da utilizzare su mobile.

Vediamo per esempio come i primi trading e abbiamo stilato da mobile avranno un fonsai.

Sicuramente ha sicuramente differente se vado negli Spector di Fig, ma in questo caso vedo che il Fonsai scende scende a quarantotto per l'account.

Vediamo come applicare questa regola tramite una media.

Qui quindi applichiamo una media qui in questo caso per il cominciamo dalla h una quindi hat media screen and ed in questo caso impostiamo un maxi weed.

Utilizzerei in questo caso come break point, quello che anche buster considera come come mobile.

Quindi una risoluzione di cinque centosettanta sei pixel che dovrebbe far ghettizzare la visuale anche in l'ex capo della maggior parte degli schermi mobili happy con le mie regole per sovrascrivere in questo caso il fonsai dell'account quindi ridefinisca il selettore h uno e cambio solo attributo fonsai in questo caso da novantasei pixel iniziali scende a quarantotto pixel, vediamo già salvando la differenza ok vediamo che in effetti diminuisce.

C' è anche un problema di interlinea continua a prendere i valori della white che scende a cinquantasei pixel e penso che in questo caso riusciamo ad avere un risultato che ci soddisfa ricarichiamo ok quindi abbiamo già stilato il primo heading.

Continuiamo con gli altri elementi, quindi l'accaduto e che è anche l'elemento paragrafo abbiamo applicato le media qui ri ha tutto il testo, quindi adesso la tipografia si adegua sulla base della risoluzione del device vediamo che già un risultato differente ma ancora qualcosa non va posto prima di proseguire.

Una cosa che noto in questo momento è come il layout sembra spaccare compri mercy c' è qualcosa che va in overflow l'abbiamo detto prima dovrebbero essere le le immagini che in questo momento hanno la loro dimensione naturale, quindi dovrebbe essere per ispezionare una.

Questa è un circa settecento pixel, quindi c' è qualcosa che sta strabordante dai confini, dai limiti della nostra pagina.

Cosa possiamo fare in realtà in questo caso potremmo non applicare una media cui ma semplicemente applicare una regola aggiuntiva alle immagini potrei per esempio decidere di applicare una larghezza massima all'immagine.

Io adesso trovo il selettore che avevo prima impostato nel mio stai css che era se non sbaglio, ok, il selettore con cui targetti zavod tutte le i tag img dentro il mio container, immagino alle regole che già impostato aggiungerei una maxi weed, quindi sto dando un limite di ampiezza del cento per cento, ovvero le immagini in generale non dovranno mai superare il cento per cento del loro container padre ok, quindi cercheranno di occupare tutto lo spazio in orizzontale, ma non andare oltre.

Quindi salvo ricavi quella pagina e vediamo come le immagini adesso restano centrate e si ridimensionano in maniera fluida per restare nel loro container e non vanno oltre, quindi senza applicare i media qui in realtà con un semplice attributo ho reso fluido un comportamento di un elemento.

Sbirciamo un attimo alla modalità responsive del dei device Stool e vediamo come con questo con questa modalità è rimasto tutto invariato da desktop.

Quindi le immagini in pratica finché c' è spazio, si comportano come dovrebbero cercano di assumere la loro dimensione reale, ma man mano che invece il container si restringe, queste non supereranno il cento per cento del loro del loro padre, per cui anche questa è messa a posto.

C' è ancora qualcosa che non va, cioè il menu superiore che non ci convince ancora come vorremmo e potremmo, per esempio in questo caso, applicare anche qui una regola é una regola più semplice.

Io direi che senza media qui potremmo solo decidere di mandare a capo il menu per farlo andare su due righe.

In questo caso potrei andare nel mio blocco nella mia section Eder, dove ho definito le regole di flic Xbox.

Cerchiamo un attimo al volo, ok? Al mio Heather Container ho dato una regola display flex, però potrei specificare anche un flex rap rap con cui dico Ok, senti, se finisce lo spazio, il resto portalo a capo.

E infatti il resto degli elementi in questo momento va in una seconda riga.

Mi sembra molto più ordinato.

Mi sembra fruibile.

È quindi abbiamo il luogo e sotto le le due piccole voci di menu che continua a comportarsi come dovrebbero.

Abbiamo sistemato il menu del Ledger, ma c'è ancora qualcosa che non va.

C'è ancora qualcosa che non va.

Torniamo nella modalità responsive del dei nostri dei nostri strumenti e proviamo a giocare ancora con la responsabilità.

È sinceramente c' è qualcosa che non mi convince sul menu di navigazione dei dei lavori.

Probabilmente da mobile occuperebbe più spazio del dovuto.

Si accavalla, verrebbero gli elementi è qualcosa che risulterebbe difficile da utilizzare nella navigazione.

Quindi in questo caso la via più semplice è quella di nasconderlo.

Decidiamo semplicemente di nasconderlo da mobile, perché probabilmente non darebbe un'esperienza ottimale per per l'utente.

In questo caso applico una media inquiry, quindi andro' sulla sezione della la sezione dei lavori di menu.

Quindi era se non sbaglio, works manju Ok.

E applicherò and a grave dov'é.

In questo caso potrei anche scegliere come Max Suite di Tar, ghettizzare invece un tablet, per esempio.

Quindi da tablet in giù.

Il menu sparirà e mi sembra possa avere senso quindi in questo caso il break point che potremmo utilizzare.

Sette, sei otto settecento sessantotto pixel.

Per cui dentro questa media qui un tipo ok dentro questa media qui ri ride.

Finirò una regola per il mio Wars con un semplice display, no.

Quindi ricarico la pagina imposto la risoluzione di un iPad, per esempio, dal dal divise dove appunto vedo sette sei otto come come risoluzione massima del Wu porti in larghezza e vedo come il mio menu sia sparito.

E così avviene anche da mobile.

Quindi, impostando un iPhone vedo che anche lì è sparito il menu per poi riapparire quando ritorno in modalità adesso.

Bene, questo è un altro correttivo più che necessario.

Credo che ci siamo quasi.

Cos'altro è rimasto dirotto.

Torniamo alla modalità iPhone dieci a Bene c'è ancora qualcosina che potremmo sistemare riguarda la sezione del dei lavori con queste due colonne che magari potrebbero andare, le due colonne della Info section potrebbero andare una luna sotto l'altra nel suo componente le bolle nel suo componente paragrafo eh? Direi che questa potremmo correggerlo.

In questo caso preferisco applicare una semplice regola ai miei elementi di post folio.

Identifico work info ha complicato display flex flex anche qui un secondo me un wrapping wrapping può andar bene.

Quindi flex rap, rap salvo ricarico bene tutto procede perché le due colonne, non trovando spazio, vanno in wrapping, quindi vanno luna sotto l'altra quindi la la colonna con le bolle, la colonna col paragrafo e adesso per finire mi resta solo correggere la sezione about.

Anche qui abbiamo due colonne molto strette allineate.

Qui invece credo che applicherò delle modifiche più mirate con una media qui.

Quindi scorrono nella sezione about nel mio css quello che potrò fare definire una media qui dove cambierò un po' giochero' un po' con le proprietà flex, per cui media screen and max-width.

Io direi che anche in questo caso puo' starci può starci una media, quindi che parta già da dal tablet.

Quindi un sette sei otto pixel può andare sette sei otto pixel puo' andare é gia' da tablet cerchiamo di metterle l'una sotto l'altra cerchiamo di occupare tutto lo spazio disponibile per cui quello che faro' sarà ridefinire delle regole per il selettore contacts content.

Quindi vediamo un attimo dal vivo su sulla console abbiamo detto abbiamo la stazione con tax, il loro rapper, loro container contact con te con tax content.

In questo caso possiamo decidere di cambiare la detection del flax, quindi farei un giustifichi content.

Scusate quindi farei un flex direction colum e l'altra regola che potrei fare è riportare le due colonne che adesso erano vincolate al quaranta percento.

Quindi con takes about e contact form le riportero' al cento per cento in quanto prima le avevo forzate ad una dimensione ben precisa.

Quindi the finiro' all'interno della media qui e là la stessa regola, ma in questo caso con tweed cento per cento salviamo ricarichiamo e vediamo come.

Adesso abbiamo corretto anche questo problema.

Quindi da mobile tutto weinstock tutto va uno l'uno sotto l'altro e assumono la piena.

La piena dimensione quindi fu weed riempiono completamente il newport da parte a parte.

Diamo uno sguardo generale.

Credo che ci siamo.

Credo che da mobile abbiamo risolto buona parte di problemi e anche da tablet, per cui possiamo dire che con un po' di regole, con un po' di media qui ho un po' di regole mirate Per aumentare la fluidità del nostro layout abbiamo m', siamo riusciti a raggiungere, ad aggiungere un approccio responsive al nostro, al nostro sito.