Si conclude questo portentoso scacco matto in venti mosse dato alla professione del web design dove abbiamo attraversato terre misteriose e inesplorate come cavalieri fantasy partendo da https://umbriawaynoir.wordpress.com/2020/12/28/fondamenti-di-web-design-introduzione/ del 28 dicembre ad oggi. Non poteva concludersi che affrontando un argomento scottante, quello del responsive design. Come ci può aiutare SASS nel dimensionare le pagine e certe sue caratteristiche in base agli screen? Con un esempio concreto. Andiamoci a riprendere il codice del post precedente solo per quanto riguarda la formattazione della prima sezione:

 .opzione1 {
    color:$colorselezionato1;

    h3
    {
        font-size: 40px;
    }

    p
    {
        color: $colorselezionato;
        font:{
            size:30px;
            weight:bold;
            family:verdana;
        }
        @include margin(100px);
    }

    }

Adesso risolviamo il seguente problema: voglio differenziare in base a tre break point diversi la visibilità di un elemento (per esempio H3) in modo che si veda in un modo sul mondo mobile, con una dimensione diversa sul monto tablet e ancora diversificando per le risoluzioni desktop. Soluzione applicando media queries nidificate:

h3 {

@media screen and (max-width:320px) {
font-size:20px
}

@media screen and (max-width:768px) {
font-size:22px
}

@media screen and (min-width:769px) {
font-size:24px
}

}

In questo modo applicando le istruzioni media screen direttamente all’ interno del selettore, quando faccio il ridimensionamento della pagina vedrò l’elemento caratterizzato dall’ inclusione H3 subide drastici ridimensionamenti! A conclusione di questa scorribanda rispetto a tutte le tecnologie visionate con voli dall’ alto per una prima overview (HTML, HTML5 semantico, CSS, SASS, BOOTSTRAP) la nostra forma mentis come futuri sviluppatori frontend developer è cresciuta. Abbiamo fondamentalmente capito che non ha senso studiare “a pappagallo” imparando “a memoria centinaia di informazioni”, ma che ha molto più senso vedere il funzionamento generale in una visione olistica e scendere nel dettaglio per individuare di volta in volta le scomposizioni di interesse. Quando non ci ricordiamo qualcosa ha molto più senso consultare le documentazioni ufficiali offerte a sostegno dalle singole tecnologie piuttosto che inventare l’acqua calda, certamente il W3S, https://www.w3schools.com/ è un buon punto di partenza per uscire dalle sabbie mobili quando siamo in zugzwang, così come https://getbootstrap.com/docs/4.0/getting-started/introduction/ offre supporto per il framework responsive del momento bootstrap!

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo di WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione /  Modifica )

Google photo

Stai commentando usando il tuo account Google. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

Connessione a %s...