Share
Întrebările media sunt o parte vitală a designului web modern, dar ele nu sunt întotdeauna perfecte. În acest articol vom examina ideea de "întrebări element"; ceea ce mulți susțin este viitorul unui design web receptiv.
Articolul lui Ethan privind Responsive Web Design a schimbat modul în care construim site-uri web pentru totdeauna. Articolul său a fost inspirat și a fost rapid adoptat de designeri și dezvoltatori web. Au apărut abordări precum "Mobile First", "Desktop First" și "Device Agnostic", modele de design dezvoltate de atunci, noi standarde precum
Nu mai construim site-uri pentru o anumită dimensiune a ecranului, browsere sau dispozitive. În schimb, le construim astfel încât să fie la fel de plăcute pe orice dispozitiv și la orice dimensiune a ecranului. Facem acest lucru folosind "interogări media" - nu uităm meta-tag-ul de vizualizare.
Interogările media sunt proiectate pentru a ne permite să formăm reguli de stil într-un anumit mediu. Una dintre cele mai frecvente utilizări ale interogărilor media este schimbarea stilurilor într-un anumit interval de lățime a ferestrei de vizualizare. Următorul cod, de exemplu, ascunde bara laterală atunci când site-ul Web este accesat printr-un port de vizualizare cu lățimea de până la 720px.
.site-sidebar afișare: flex; flex: 1 1 320px; @media (max-width: 720px) site-sidebar display: none;
Interogările media au evoluat, împreună cu dispozitivele, cu mai multe caracteristici adăugate, cum ar fi orientare și rezoluţie. Următorul exemplu arată cum am putea utiliza una dintre aceste funcții pentru a servi o dimensiune mai mare a imaginii pe un ecran cu rezoluție înaltă.
.site-logo a afișare: inline-block; fundal: url (imagini / logo.png) no-repeat; ecranul @media și (min-rezoluție: 2dpx) background: url (images/[email protected]);
Interogările media au devenit o componentă de bază atunci când oferă o experiență receptivă. Ia-te la viteza de citit aceste articole, tutoriale, și sfaturi privind exploatarea interogări mass-media la posturile noastre anterioare în Tuts +, precum și peste tot pe Internet.
Interogările privind mediile nu reprezintă un glonț de argint pentru fiecare situație în ceea ce privește designul web receptiv, de fapt, nu a fost niciodată dorit să fie așa.
Astăzi, există o gamă largă de dispozitive pe piață în diferite dimensiuni și trăsături, estompând linia dintre "mobile" și "desktop" (vă uit la "laptopurile hibride"). Din acest motiv, menținerea esteticii unui site, a unei experiențe extraordinare a utilizatorului și a performanței nu a fost niciodată mai dificilă.
La Google IO 2015, Google le permite dezvoltatorilor să verifice site-ul web pe peste 100 de dispozitive diferite.Și odată ce adăugați lucruri precum anunțurile, tabelele și conținutul moștenit în mix, situația poate fi și mai gravă. Destul de curând veți avea parte de aspectele "nu atât de bune" ale interogărilor mediatice.
Luați în considerare următorul exemplu. Avem o componentă UI pentru a afișa profilul membrilor echipei noastre. Vrem să folosim această componentă exactă în câteva locuri diferite pe site-ul nostru. Acest exemplu arată modul în care este alcătuit interfața utilizator la un 780px lățimea de afișare.
În pagina "profilul de utilizator", punem avatarul utilizator în stânga, iar numele de utilizator și biografia din dreapta.
Setarea profilului de utilizator în profilul "Utilizator".În pagina "echipei" de pe site-ul nostru, cu toate acestea, aspectul se schimbă; imaginea avatarului de utilizator este acum plasată în partea superioară, iar numele de utilizator, precum și biografia sunt sub. Dimensiunea fontului ar putea fi, de asemenea, un pic mai mică.
Formatarea profilului utilizatorului în pagina "echipei".Această situație poate fi rezolvată cu interogări media. Putem scrie, de exemplu, CSS, după cum urmează:
/ ** * Profilul * / .team-profile text-align: center; .prof .bio margin-top: 20px; font-size: 14px; @media (min-width: 480px) . profil-profil text-align: left; afișaj: flex; .team-profil .avatar flex: 0 0 120px; .profil-.bio font-size: 16px; flex: 0 1 580x; / ** * Card de profil. * /. card-profil de profil text-align: center; .profil-card-ul .bio margin-top: 20px; font-size: 14px; / ** * Probabil, unele suprascriere * / .page pagina de profil-carte-card ...
Este fixabil, atâta timp cât folosim câteva clase suplimentare de identificare: .utilizator de profil și .utilizator-profil-card.
Cu toate acestea, se impune și faptul că UI-ul nostru este o componentă reutilizabilă; un UI care poate fi plasat oriunde pe site, fiind capabil să se adapteze la împrejurimile sale.
În acest exemplu, dorim ca aspectul componentei noastre să se adapteze atunci când este înfășurat de un mic container, în loc să fie împins de portul de vizualizare a browserului. Deci, mai degrabă decât să se bazeze pe mărimea ferestrei de vizualizare a browserului pentru a schimba aspectul, de ce nu putem face acest lucru la nivel element?
Ideea întrebărilor de element a apărut la începutul anului 2012; un cuplu de ani după ce Responsive Web Design a devenit metodologia principală. Din păcate, probabil că nu au existat multe motive convingătoare pentru a aduce acest lucru ca un standard web la acel moment - lumea încă se obișnuia să se repete din nou.
@ianstormtaylor Da "întrebări element" a venit din nou și din nou
- Paul Irish (@paul_irish) 24 ianuarie 2012
Comunitățile web au început inițiative singure. RICG (Grupul comunitar pentru emisiunea responsabilă), același grup care a inițiat
Elementele de interogare ale elementelor funcționează similar cu interogările media; cu excepția faptului că ascultă dimensiunea elementului în locul ferestrei de vizualizare a browserului. Acest lucru ne permite să construim un sistem cu adevărat modular UI cu baza de coduri DRY-er. Având în vedere același exemplu, am putea rescrie stilurile componentei UI cu EQCSS, după cum urmează:
.profilul echipei text-align: center; .prof .bio margin-top: 20px; font-size: 14px; @element ".team-profile" și (min-width: 480px) .profile display: flex; . profil-profil .avatar flex: 1 1 120px; .team-profil .bio text-align: left; font-size: 16px; flex: 1 1 580x;
Aici nu ne pasă ce lățime de vizualizare este. După cum puteți vedea mai sus, atâta timp cât UI este întins la 480 x sau mai largă, afișăm .Avatar si .bio unul langa altul. Când lățimea UI se micșorează în jos 480 x lăsăm .Avatar și .bio stivă și aliniați conținutul la centru.
Doar pentru a clarifica, nu spun că folosirea interogărilor media este rău, deloc. Interogările media sunt minunate și am asistat la acestea pe multe site-uri construite astăzi. Mesajele interogare și interogările de elemente pot coexista cu siguranță. Cu toate acestea, există o mulțime de scenarii de proiectare în care utilizarea interogărilor de elemente ar face mai mult sens decât utilizarea interogărilor media.
Din păcate, interogările de elemente au încă un drum foarte lung de parcurs înainte de a trece în cele din urmă ca standard web; speranța noastră în această privință revine tuturor oamenilor buni de la RICG.
În timp ce așteptăm, putem explora potențialul interogărilor unui element printr-o bibliotecă JavaScript cum ar fi EQCSS. Și exact așa vom face în următorul tutorial. Rămâneți aproape!
Accentsconagua