Responsive design

Questo codelab fa parte del corso di formazione Sviluppare app web progressive, sviluppato dal team di formazione di Google Developers. Per ottenere il massimo valore da questo corso, ti consigliamo di seguire le codelab in sequenza.

Per i dettagli completi sul corso, consulta la panoramica sullo sviluppo di app web progressive.

Introduzione

Questo lab mostra come applicare uno stile ai contenuti del tuo sito web per renderli reattivi.

Obiettivi didattici

  • Come applicare uno stile all'app in modo che funzioni bene in più fattori di forma
  • Come utilizzare Flexbox per organizzare facilmente i contenuti in colonne
  • Come utilizzare le media query per riorganizzare i contenuti in base alle dimensioni dello schermo

Che cosa devi sapere

  • HTML e CSS di base

Che cosa ti serve

  • Computer con accesso al terminale/alla shell
  • Connessione a internet
  • Editor di testo

Scarica o clona il repository pwa-training-labs da GitHub e installa la versione LTS di Node.js, se necessario.

Se non hai un server di sviluppo locale preferito, installa il pacchetto Node.js http-server:

npm install http-server -g

Vai alla directory responsive-design-lab/app/ e avvia il server:

cd responsive-design-lab/app
http-server -p 8080 -a localhost -c 0

Puoi terminare il server in qualsiasi momento con Ctrl-c.

Apri il browser e vai all'indirizzo localhost:8080/.

Nota:annulla la registrazione di tutti i service worker e svuota tutte le cache dei service worker per localhost in modo che non interferiscano con il lab. In Chrome DevTools, puoi farlo facendo clic su Cancella dati sito nella sezione Cancella spazio di archiviazione della scheda Applicazione.

Se hai un editor di testo che ti consente di aprire un progetto, apri la cartella responsive-design-lab/app/. In questo modo sarà più facile organizzarsi. In caso contrario, apri la cartella nel file system del computer. La cartella app/ è quella in cui creerai il lab.

Questa cartella contiene:

  • index.html è la pagina HTML principale del nostro sito/applicazione di esempio
  • modernizr-custom.js è uno strumento di rilevamento delle funzionalità che semplifica il test del supporto di Flexbox
  • styles/main.css è il foglio di stile a cascata per il sito di esempio

Torna all'app nel browser. Prova a ridurre la larghezza della finestra a meno di 500 px e noterai che i contenuti non rispondono bene.

Apri gli strumenti per sviluppatori e attiva la modalità dispositivo nel browser. Questa modalità simula il comportamento della tua app su un dispositivo mobile. Nota che la pagina è rimpicciolita per adattare i contenuti a larghezza fissa allo schermo. Questa non è una buona esperienza perché i contenuti saranno probabilmente troppo piccoli per la maggior parte degli utenti, costringendoli a ingrandire e spostare la visualizzazione.

Sostituisci TODO 3 in index.html con il seguente tag: 

<meta name="viewport" content="width=device-width, initial-scale=1">

Salva il file. Aggiorna la pagina nel browser e controllala in modalità dispositivo. Nota che la pagina non è più rimpicciolita e la scala dei contenuti corrisponde a quella di un computer. Se i contenuti si comportano in modo imprevisto nell'emulatore di dispositivo, attiva e disattiva la modalità dispositivo per ripristinarli.

Nota:l'emulazione del dispositivo fornisce un'approssimazione precisa dell'aspetto del tuo sito su un dispositivo mobile, ma per avere un quadro completo devi sempre testare il sito su dispositivi reali. Puoi scoprire di più sul debug dei dispositivi Android su Chrome e Firefox.

Spiegazione

Un meta tag viewport indica al browser come controllare le dimensioni e il ridimensionamento della pagina. La proprietà width controlla le dimensioni dell'area visibile. Può essere impostato su un numero specifico di pixel (ad esempio width=500) o sul valore speciale device-width,, che corrisponde alla larghezza dello schermo in pixel CSS a una scala del 100%. Esistono valori height e device-height corrispondenti, che possono essere utili per le pagine con elementi che cambiano dimensione o posizione in base all'altezza del viewport.

La proprietà initial-scale controlla il livello di zoom al primo caricamento della pagina. L'impostazione della scala iniziale migliora l'esperienza, ma i contenuti continuano a superare il bordo dello schermo. Lo correggeremo nel passaggio successivo.

Per ulteriori informazioni

Sostituisci TODO 4 in styles/main.css con il seguente codice:

@media screen and (max-width: 48rem) {
  .container .col {
    width: 95%;
  }
}

Salva il file. Disattiva la modalità dispositivo nel browser e aggiorna la pagina. Prova a ridurre la larghezza della finestra. Nota che i contenuti passano a un layout a una sola colonna alla larghezza specificata. Riattiva la modalità dispositivo e osserva che i contenuti si adattano alla larghezza del dispositivo.

Spiegazione

Per assicurarci che il testo sia leggibile, utilizziamo una media query quando la larghezza del browser diventa 48 rem (768 pixel alla dimensione del carattere predefinita del browser o 48 volte la dimensione del carattere predefinita nel browser dell'utente). Consulta la sezione Quando utilizzare em e rem per una spiegazione dettagliata del motivo per cui rem è una buona scelta per le unità relative. Quando viene attivata la media query, modifichiamo il layout da tre colonne a una colonna modificando il width di ciascuno dei tre div in modo che riempiano la pagina.

Il modulo di layout flessibile (Flexbox) è uno strumento utile e facile da usare per rendere i tuoi contenuti adattabili. Flexbox ci consente di ottenere lo stesso risultato dei passaggi precedenti, ma si occupa di tutti i calcoli della spaziatura e fornisce una serie di proprietà CSS pronte all'uso per strutturare i contenuti.

Commentare le regole esistenti in CSS

Commenta tutte le regole in styles/main.css racchiudendole tra /* e */. Queste saranno le nostre regole di riserva per i casi in cui Flexbox non è supportato nella sezione Flexbox come miglioramento progressivo.

Aggiungere il layout Flexbox

Sostituisci TODO 5.2 in styles/main.css con il seguente codice:

.container {
  display: -webkit-box;  /* OLD - iOS 6-, Safari 3.1-6 */
  display: -ms-flexbox;  /* TWEENER - IE 10 */
  display: flex;         /* NEW, Spec - Firefox, Chrome, Opera */
  background: #eee;  
  overflow: auto;
}

.container .col {
  flex: 1;
  padding: 1rem;
}

Salva il codice e aggiorna index.html nel browser. Disattiva la modalità dispositivo nel browser e aggiorna la pagina. Se restringi la finestra del browser, le colonne si assottigliano fino a quando non ne rimane visibile solo una. Risolviamo il problema con le media query nel prossimo esercizio.

Spiegazione

La prima regola definisce container div come contenitore flessibile. In questo modo, viene attivato un contesto flessibile per tutti i relativi elementi secondari diretti. Stiamo combinando la sintassi precedente e quella nuova per includere Flexbox e ottenere un supporto più ampio (per maggiori dettagli, vedi Per ulteriori informazioni).

La seconda regola utilizza la classe .col per creare elementi secondari flessibili di larghezza uguale. Se imposti il primo argomento della proprietà flex su 1 per tutti gli div con classe col, lo spazio rimanente viene suddiviso equamente tra loro. È più comodo che calcolare e impostare manualmente la larghezza relativa.

Per ulteriori informazioni

(Facoltativo) Imposta larghezze relative diverse

Utilizza la pseudo-classe nth-child per impostare le larghezze relative delle prime due colonne su 1 e della terza su 1,5. Devi utilizzare la proprietà flex per impostare le larghezze relative di ogni colonna. Ad esempio, il selettore per la prima colonna avrebbe questo aspetto:

.container .col:nth-child(1)

Utilizzare le query supporti con Flexbox

Sostituisci TODO 5.4 in styles/main.css con il codice riportato di seguito:

@media screen and (max-width: 48rem) {
  .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-flow: column;
  }
}

Salva il codice e aggiorna index.html nel browser. Ora, se riduci la larghezza del browser, i contenuti vengono riorganizzati in una sola colonna.

Spiegazione

Quando viene attivata la media query, modifichiamo il layout da tre colonne a una colonna impostando la proprietà flex-flow su column. In questo modo si ottiene lo stesso risultato della media query aggiunta nel passaggio 5. Flexbox fornisce molte altre proprietà come flex-flow che ti consentono di strutturare, riordinare e giustificare facilmente i tuoi contenuti in modo che rispondano bene in qualsiasi contesto.

Poiché Flexbox è una tecnologia relativamente nuova, dobbiamo includere i fallback nel nostro CSS.

Aggiungere Modernizr

Modernizr è uno strumento di rilevamento delle funzionalità che semplifica il test del supporto di Flexbox.

Sostituisci TODO 6.1 in index.html con il codice per includere la build personalizzata di Modernizr:

<script src="modernizr-custom.js"></script>

Spiegazione

Nella parte superiore di index.html è inclusa una build di Modernizr, che verifica il supporto di Flexbox. Viene eseguito il test al caricamento della pagina e viene aggiunto il codice flexbox all'elemento <html> se il browser supporta Flexbox. In caso contrario, aggiunge una classe no-flexbox all'elemento <html>. Nella sezione successiva aggiungeremo queste classi al CSS.

Nota:se utilizzassimo la proprietà flex-wrap di Flexbox, dovremmo aggiungere un rilevatore Modernizr separato solo per questa funzionalità. Le versioni precedenti di alcuni browser supportano parzialmente Flexbox e non includono questa funzionalità.

Utilizzare Flexbox in modo progressivo

Utilizziamo le classi flexbox e no-flexbox nel CSS per fornire regole di riserva quando Flexbox non è supportato.

Ora, in styles/main.css, aggiungi .no-flexbox davanti a ogni regola che abbiamo commentato:

.no-flexbox .container {
  background: #eee;
  overflow: auto;
}

.no-flexbox .container .col {
    width: 27%;
    padding: 30px 3.15% 0;
    float: left;
}

@media screen and (max-width: 48rem) {
  .no-flexbox .container .col {
    width: 95%;
  }
}

Nello stesso file, aggiungi .flexbox davanti al resto delle regole:

.flexbox .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background: #eee;
  overflow: auto;
}

.flexbox .container .col {
  flex: 1;
  padding: 1rem;
}

@media screen and (max-width: 48rem) {
    .flexbox .container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        flex-flow: column;
    }
}

Se hai completato il passaggio facoltativo 5.3, ricordati di aggiungere .flexbox alle regole per le singole colonne.

Salva il codice e aggiorna index.html nel browser. La pagina dovrebbe avere lo stesso aspetto di prima, ma ora funziona correttamente in qualsiasi browser su qualsiasi dispositivo. Se hai un browser che non supporta Flexbox, puoi testare le regole di fallback aprendo index.html in quel browser.

Per ulteriori informazioni

Hai imparato a dare uno stile ai tuoi contenuti per renderli adattabili. Utilizzando le media query, puoi modificare il layout dei contenuti in base alle dimensioni della finestra o dello schermo del dispositivo dell'utente.

Argomenti trattati

  • Impostazione dell'area visibile visiva
  • Flexbox
  • Query supporti

Risorse

Scopri di più sulle nozioni di base del design responsivo

Scopri di più su Flexbox come miglioramento progressivo

Scopri di più sulle librerie per CSS adattabili

Scopri di più sull'utilizzo delle media query

Per visualizzare tutti i codelab del corso di formazione sulle PWA, consulta il codelab di benvenuto del corso.