Share
Le query sui media sono una parte vitale del web design moderno, ma non sempre sono perfette. In questo articolo daremo un'occhiata all'idea di "query di elementi"; quello che molti sostengono è il futuro del responsive web design.
L'articolo di Ethan su Responsive Web Design ha cambiato il modo in cui costruiamo i siti web, per sempre. Il suo articolo è stato ispirato ed è stato rapidamente adottato dai web designer e sviluppatori. Sono emersi approcci come "Mobile First", "Desktop First" e "Device Agnostic", da allora sono stati sviluppati modelli di design, nuovi standard come il
Non costruiamo più siti Web per schermi, browser o dispositivi particolari. Li costruiamo invece in modo che siano ugualmente divertenti su qualsiasi dispositivo e con qualsiasi dimensione dello schermo. Lo facciamo usando "media query", non dimenticando il meta tag viewport.
Le query multimediali sono progettate per consentirci di modellare le regole di stile in un ambiente specifico. Uno degli usi più comuni delle query multimediali consiste nel cambiare gli stili all'interno di un certo intervallo di larghezze di viewport. Il seguente codice, ad esempio, nasconde la barra laterale quando si accede al sito Web attraverso un viewport di larghezza fino a 720px.
.site-sidebar display: flex; flex: 1 1 320 px; @media (larghezza massima: 720px) .site-sidebar display: none;
Le query sui media si sono evolute, insieme ai dispositivi, con diverse funzionalità aggiunte come orientamento e risoluzione. L'esempio seguente mostra come utilizzare una di queste funzionalità per offrire una dimensione dell'immagine più grande su uno schermo ad alta risoluzione.
.site-logo a display: blocco in linea; background: url (images / logo.png) no-repeat; @media screen e (min-resolution: 2dppx) background: url (images/[email protected]);
Le query multimediali sono diventate un componente di base quando si fornisce un'esperienza reattiva. Mettiti alla prova leggendo questi articoli, tutorial e suggerimenti su come sfruttare le query multimediali sui nostri post precedenti in Tuts + e su Internet.
Le query sui media non sono la pallottola d'argento per ogni situazione nel responsive web design, infatti, non è mai stato pensato per esserlo.
Oggi, ci sono una vasta gamma di dispositivi sul mercato in varie dimensioni e caratteristiche, confondendo la linea tra "mobile" e "desktop" (sto guardando voi "laptop ibridi"). Per questo motivo, mantenere l'estetica di un sito Web, un'esperienza utente straordinaria e le prestazioni non sono mai state così difficili.
In Google IO 2015, Google consente agli sviluppatori di controllare il proprio sito Web su oltre 100 dispositivi diversi.E una volta che aggiungi elementi come annunci, tabelle e contenuti legacy nel mix, la situazione può essere anche peggiore. Presto ti imbatterai in aspetti "non tanto buoni" delle domande dei media.
Considera il seguente esempio. Abbiamo un componente dell'interfaccia utente per mostrare il profilo del nostro membro del team. Vogliamo utilizzare questo componente esatto in un paio di luoghi diversi sul nostro sito web. Questo esempio mostra come l'interfaccia utente è strutturata in a 780px larghezza della finestra.
Nella pagina "Profilo utente", inseriamo l'avatar utente a sinistra e il nome utente e la biografia a destra.
Layout del profilo utente nel profilo "Utente".Nella pagina "team" del nostro sito Web, tuttavia, il layout cambia; l'immagine dell'avatar utente è ora posizionata in alto, e sotto c'è il nome utente e la biografia. La dimensione del carattere potrebbe anche essere un po 'più piccola.
Layout del profilo utente nella pagina "team".Questa situazione può essere risolta con le query multimediali. Possiamo, ad esempio, scrivere il CSS, come segue:
/ ** * Profilo * /. Profilo-profilo allineamento del testo: centro; .team-profile .bio margin-top: 20px; font-size: 14px; @media (min-width: 480px) .team-profile text-align: left; display: flex; .team-profile .avatar flex: 0 0 120px; .team-profile .bio font-size: 16px; flex: 0 1 580x; / ** * Scheda profilo. * / .team-profile-card text-align: center; .team-profile-card .bio margin-top: 20px; font-size: 14px; / ** * Probabilmente, alcuni sovrascrivono * / .page .team-profile-card ...
È risolvibile, purché vengano utilizzate alcune classi di identificazione aggiuntive: .profilo utente e .user-profile-scheda.
Tuttavia, va anche contro la nostra interfaccia utente come componente riutilizzabile; un'interfaccia utente che può essere posizionata ovunque sul sito Web, potendo adattarsi all'ambiente circostante.
In questo esempio vogliamo che il layout del nostro componente si adatti quando viene avvolto da un piccolo contenitore, invece che quando è schiacciato dalla finestra del browser. Quindi, piuttosto che basarsi sulla dimensione del viewport del browser per spostare il layout, perché non possiamo farlo al livello di elemento?
L'idea delle richieste di elementi è emersa all'inizio del 2012; un paio di anni dopo che il responsive Web Design è diventato la metodologia mainstream. Sfortunatamente, probabilmente non c'erano molti motivi convincenti per far apparire questo come uno standard web in quel momento - il mondo si stava ancora abituando ad andare di nuovo male.
@ianstormtaylor yeah "query di elementi" è venuto fuori di tanto in tanto
- Paul Irish (@paul_irish) il 24 gennaio 2012
Le comunità Web hanno iniziato le iniziative da sole. RICG (Responsive Issue Community Group), lo stesso gruppo che ha avviato il
Le query sugli elementi funzionano in modo simile alle query multimediali; tranne che ascoltano la dimensione dell'elemento al posto della finestra del browser. Questo ci consente di costruire un sistema di interfaccia utente veramente modulare con base di codice DRY-er. Dato lo stesso esempio, potremmo riscrivere gli stili del nostro componente UI con EQCSS, come segue:
.profilo della squadra text-align: center; .team-profile .bio margin-top: 20px; font-size: 14px; @element ".team-profile" e (min-width: 480px) .team-profile display: flex; .team-profile .avatar flex: 1 1 120px; .team-profile .bio text-align: left; font-size: 16px; flex: 1 1 580x;
Qui non ci interessa quale sia la larghezza della finestra. Come puoi vedere sopra, a patto che il UI è allungato a 480px o più ampio, mostriamo il .avatar e il .bio side-by-side. Quando la larghezza dell'interfaccia utente si riduce in basso 480px lasciamo che il .avatar e .bio impila e allinea il contenuto al centro.
Giusto per chiarire, non sto dicendo che usare le query sui media sia sbagliato, per niente. Le query sui media sono meravigliose e ne siamo testimoni su molti siti web costruiti oggi. Le query multimediali e le query sugli elementi possono certamente coesistere. Tuttavia ci sono molti scenari di progettazione in cui l'utilizzo di query di elementi avrebbe più senso dell'utilizzo di query multimediali.
Sfortunatamente, le query sugli elementi hanno ancora molta strada da fare prima di passare definitivamente come standard web; la nostra speranza su questo riposa con tutte le brave persone di RICG.
Mentre aspettiamo, possiamo esplorare il potenziale delle query di elementi attraverso una libreria JavaScript come EQCSS. Ed è esattamente quello che faremo nel prossimo tutorial. Rimanete sintonizzati!
Accentsconagua