Crea un sito reattivo in una settimana: media query (parte 4)

Contenuto

• 01. Aggiunta di media query
• 02. Anatomia di una media query
• 03. Un'altra cosa ...
• 04. Scelta dei punti di interruzione
• 05. Regolazione delle nostre miniature
• 06. Non solo larghezza

• Conoscenza necessaria: CSS e HTML intermedi
• Richiede: Editor di testo, browser moderno, software di grafica
• Tempo del progetto: 1 ora (5 ore in totale)
• File di supporto

Una parte relativamente nuova delle specifiche CSS, le media query sono senza dubbio l'aspetto più eccitante del responsive web design e un'area matura per ulteriori sperimentazioni.

Avendo accettato la necessità di layout adattivi, alcuni hanno visto le media query come un mezzo per adattare i layout adattivi ai siti esistenti a larghezza fissa. Tra coloro che hanno abbracciato layout reattivi, molti lo hanno fatto dal punto di vista del desktop, nascondendo contenuti e funzionalità man mano che la visualizzazione si restringe.

In questo tutorial, abbiamo adottato un approccio alternativo, mobile first. Ora, mentre cerchiamo di includere query multimediali, possiamo pensare aggiungendo caratteristiche man mano che aumenta lo spazio sullo schermo, con la certezza che il markup e il design alla base del nostro sito forniscono una base di riferimento rispettabile.

Oggi andremo oltre il nostro portafoglio di modelli e costruiremo le singole pagine richieste per il nostro sito web. In tal modo, vedremo come vengono costruite le media query e le implementeremo in modo veramente reattivo.

01. Aggiunta di media query

Con i componenti nel nostro portafoglio di modelli completi e funzionanti al di fuori dei confini di qualsiasi layout, è il momento di spostarli nelle diverse pagine che compongono il nostro sito.

Inizieremo con la nostra homepage. Dal design orientato al desktop, possiamo vedere che in finestre più ampie il nostro layout dovrebbe apparire come segue:

Prendendo le misurazioni dal nostro progetto, possiamo descrivere l'area del documento in CSS come segue:

.document {
imbottitura: 0,5%;
}
.principale {
larghezza: 74,242424242424%; / * 784/1056 * /
galleggiante: sinistra;
}
.complementare {
larghezza: 22,727272727273%; / * 240/1056 * /
galleggiante: a destra;
}

Come abbiamo appreso nella seconda parte di questo tutorial, stiamo usando la seguente formula per calcolare la larghezza percentuale di queste colonne:

(destinazione / contesto) * 100 = risultato

Quando ridimensioniamo il nostro browser, vedremo che il layout del nostro desktop si ridimensiona dallo schermo di dimensioni più piccole a quello più grande. Ovviamente, a dimensioni ridotte le colonne sono troppo strette e le lunghezze delle righe così brevi che il contenuto è difficile da leggere. Vogliamo questo layout solo quando c'è abbastanza spazio disponibile per funzionare.

È qui che entrano in gioco le media query. Supponendo che questo layout abbia effetto solo quando il browser è più largo di 768px, possiamo aggiungere il seguente CSS:

.document {
imbottitura: 0,5%;
}
@media screen e (larghezza minima: 768 px) {
.principale {
larghezza: 74,242424242424%; / * 784/1056 * /
galleggiante: sinistra;
}
.complementare {
larghezza: 22,727272727273%; / * 240/1056 * /
galleggiante: a destra;
}
}

Ora, quando il viewport è più stretto di 768px, tutto ciò che si trova all'interno della media query verrà ignorato. Verrà ignorato da qualsiasi browser che non supporti anche le media query.

02. Anatomia di una media query

Per capire cosa sta succedendo qui, diamo un'occhiata a come viene costruita una media query. Possiamo dividerlo in due parti:

• Schermo @media: La prima parte di una media query è il tipo di supporto. Potresti riconoscere questa sintassi se hai mai incluso stili di stampa nel tuo CSS. Puoi anche riconoscere il nome del tipo dal file media attributo sul collegamento> elemento. Questo perché entrambi accettano l'insieme approvato di tipi di media trovato nella specifica CSS 2.1.
• (larghezza minima: 768 px): La seconda parte è il file query. Questo include il caratteristica da interrogare (in questo caso la larghezza minima del viewport) e il corrispondente valore per testare (768px).

Quando parliamo di responsive web design, c'è la tendenza a concentrarsi sulla larghezza, ma ci sono anche altre funzionalità che possiamo testare:

• (min- | max-) larghezza e (min- | max-) altezza: Questi ci consentono di interrogare la larghezza e l'altezza del viewport (cioè la finestra del browser).
• (min- | max-) dispositivo-larghezza e (min- | max-) device-height: Questi ci consentono di interrogare la larghezza dell'intero display. Nella mia esperienza, di solito è più sensato basare i layout sul viewport piuttosto che sul display.
• orientamento: Puoi immediatamente pensare alle possibilità qui; pensa alle app che mostrano contenuti diversi in base all'orientamento del tuo telefono: lo stesso è possibile sul web.
• (min- | max-) proporzioni: Questo ci consente di adattare i layout in base al rapporto della finestra del browser ...
• (min- | max-) proporzioni dispositivo: ... e questo ci permette di fare lo stesso in base alle proporzioni del dispositivo. Owen Gregory ha scritto un meraviglioso articolo l'anno scorso che esplorava come possiamo usare questa query per legare i nostri progetti ai dispositivi su cui appaiono.
• (min- | max-) monocromatico: Possiamo anche verificare se un dispositivo ha o meno un display monocromatico. Immagina quanto sarebbe utile se i dispositivi Kindle e-ink di Amazon non mentissero e segnalassero i loro schermi come a colori!

La parte finale della nostra query è forse la più utile. Usando e, possiamo testare più funzionalità in una query. Per esempio:

@media screen e (larghezza minima: 768 px) e (orientamento: orizzontale) {
...
}

Come puoi vedere, le media query possono aiutarci a costruire esperienze abbastanza avvincenti e ho solo toccato la superficie. Se stai cercando una lettura leggera prima di coricarti, potresti fare di peggio che leggere la specifica di media query del W3C che descrive tutte le funzionalità che possiamo testare.

03. Un'altra cosa ...

Anche se abbiamo incluso query multimediali nel nostro CSS, se visualizziamo il nostro sito su un dispositivo mobile, noterai che il nostro sito viene ancora visualizzato come se il display fosse più largo di 768px.

Per capire perché questo sta accadendo, dobbiamo prendere una breve lezione di storia.

Quando l'iPhone originale fu annunciato nel 2007, uno dei suoi grandi punti di forza era la possibilità di navigare nel "vero web", anche se ciò significava siti orientati al desktop a larghezza fissa che dovevano essere schiacciati per adattarsi al suo piccolo schermo. L'iPhone è stato in grado di farlo segnalando che il suo display è largo 980px, prima di ridimensionare le pagine web per adattarle allo schermo di 320px.

Ma l'iPhone è stato introdotto prima dell'avvento del responsive design. Ora che gli autori stanno progettando siti progettati per dispositivi mobili, questa funzione è meno utile. Per fortuna, Apple ha incluso un mezzo per aggirare questo comportamento e, poiché è stato adottato da altri produttori, è diventato quasi un di fatto standard. Si tratta semplicemente di aggiungere un singolo meta elemento al nostro markup:

meta name = "viewport" content = "initial-scale = 1.0, width = device-width" />

Questo dice ai browser che riconoscono la visualizzazione che un sito web non deve essere ridimensionato e che la larghezza della finestra del browser deve essere considerata uguale alla larghezza complessiva del dispositivo. Una volta aggiunta questa riga, il nostro sito web apparirà con il layout previsto:

04. Scelta dei punti di interruzione

Torniamo alla nostra media query:

@media screen e (larghezza minima: 768 px) {
...
}

I valori in corrispondenza dei quali un layout si adatta sono comunemente indicati come punti di interruzione. Se ricordi, nella seconda parte ho detto che l'uso dei pixel è un'indicazione di un pensiero che non risponde, ma qui ho scelto 768px, probabilmente perché è la larghezza di un dispositivo familiare.

Invece di scegliere i punti di interruzione in base alle caratteristiche dei dispositivi più diffusi, può essere più efficace esaminare i valori derivati ​​dal nostro contenuto, ad esempio lunghezze di riga comode per la lettura o la dimensione massima di un'immagine.

Dato che il nostro tipo viene ridimensionato usando ems, sembra ragionevole che anche le nostre query multimediali utilizzino ems. In effetti così facendo si ha un ulteriore vantaggio. Quando un utente ridimensiona il testo nel browser, le pagine si adatteranno per utilizzare punti di interruzione più piccoli. Non solo il nostro sito web si adatterà in base alla dimensione del viewport, ma anche alla dimensione del carattere. In effetti, è stato solo quando ho visto Jeremy Keith dimostrare query mediatiche basate su em che ho capito quanto potessero essere potenti.

Sebbene il nostro design possa fornire alcune indicazioni sui possibili punti di interruzione, spesso il modo migliore per sceglierli è attraverso la sperimentazione. Regolando la larghezza della finestra del browser, ho deciso che 800px è una buona larghezza alla quale passare a un layout più complesso.

Ma come si esprimono 800px in EM? Di nuovo, possiamo usare la nostra formula, ma qual è il contesto? Quando si calcolano gli em per le media query, il contesto è sempre la dimensione del carattere predefinita del browser indipendentemente dal fatto che questo valore sia stato sovrascritto nel CSS. Questa impostazione predefinita è tipicamente 16px, che ci dà:

800 / 16 = 50

Ora possiamo aggiornare la nostra media query in questo modo:

@media screen e (larghezza minima: 50em) {/ * 800px * /
...
}

05. Regolazione delle nostre miniature

Ricorderai che nella parte 2 abbiamo progettato le nostre miniature in modo che fossero reattive. Tuttavia, una volta che le immagini all'interno di queste miniature raggiungono la loro larghezza completa, a destra di ciascuna immagine appare un'area di spazio bianco. Ancora una volta, le media query ci consentono di risolvere questo problema.

Ecco il nostro CSS originale:

ol.media li.media-item {
colore di sfondo: #fff;
margine: 0 4,16666666667% 4,16666666667% 0;
larghezza: 47,91666666667%;
galleggiante: sinistra;
}
ol.media li.media-item: nth-child (2n) {
margine destro: 0;
}

Il punto in cui appare questo spazio bianco è proprio quando il browser diventa più largo del 560px.Sceglieremo questo valore a cui passare alla visualizzazione di tre miniature per riga. Possiamo farlo aggiungendo il seguente CSS:

@media screen e (larghezza minima: 35em) {
.media-item {
larghezza: 30,612244897959%; / * 240/784 * /
margine: 0 4,081632653061% 1,1429em 0; / * 0 32/784 16px 0 * /
}
.media-item: nth-child (3n) {
margine destro: 0;
}
}

Nota che non abbiamo bisogno di riscrivere tutti gli stili richiesti per la miniatura all'interno di questa media query, solo le parti che desideriamo adattare.

Visualizzando questa modifica nel browser, noterai che non c'è alcun margine a destra di ogni seconda miniatura. Questo perché la seguente regola CSS rimane ancora attiva:

ol.media li.media-item: nth-child (2n) {
margine destro: 0;
}

Dobbiamo modificare il CSS all'interno della nostra media query per reimpostare quel valore:

@media screen e (larghezza minima: 35em) {
.media-item {
larghezza: 30,612244897959%; / * 240/784 * /
margine: 0 4,081632653061% 1,1429em 0; / * 0 32/784 16px 0 * /
}
.media-item: nth-child (2n) {
margine destro: 4,081632653061%;
}
.media-item: nth-child (3n) {
margine destro: 0;
}
}

Quando si creano media query, prestare sempre attenzione a problemi di ereditarietà come questo.

06. Non solo larghezza

È importante pensare alle media query non solo in termini di larghezza, ma anche di altre variabili. Ad esempio, il video sulla nostra pagina degli elementi multimediali è parzialmente nascosto quando l'altezza del riquadro di visualizzazione diminuisce. Abbiamo la tecnologia:

.media-object-wrapper {
imbottitura fondo: 56,25%;
larghezza: 100%;
altezza: 0;
posizione: relativa;
}
@media screen e (altezza massima: 35em) e (orientamento: orizzontale) {/ * 560px * /
.media-object-wrapper {
larghezza: 60%;
imbottitura fondo: 33,75%;
}
}

Ho persino incluso una query di orientamento per perfezionare ulteriormente questo comportamento.

Possiamo seguire un approccio simile per le altre parti del nostro design, scambiando una versione più grande dell'intestazione e spostando i collegamenti di navigazione nella parte superiore della pagina una volta che lo spazio diventa disponibile.

• Visualizza la nostra homepage reattiva
• Visualizza la nostra pagina degli elementi multimediali reattivi

E ce l'abbiamo! Abbiamo creato un sito Web reattivo e con un giorno libero! Beh, non proprio. Layout flessibili, immagini e media query sono solo l'inizio del processo di responsive design.

Domani: Nella parte finale di questo tutorial, andremo oltre il responsive web design e vedremo come possiamo creare siti web veramente reattivi.

Paul è un designer dell'interazione con sede a Brighton, in Inghilterra. È più felice quando crea interfacce semplici ma coinvolgenti native del Web.