Izradite responzivnu web stranicu za tjedan dana: medijski upiti (4. dio)

Sadržaj

• 01. Dodavanje medijskih upita
• 02. Anatomija medijskog upita
• 03. Još jedna stvar ...
• 04. Odabir točaka prekida
• 05. Prilagođavanje naših sličica
• 06. Ne samo širina

• Potrebno znanje: Srednji CSS i HTML
• Zahtijeva: Uređivač teksta, moderni preglednik, grafički softver
• Vrijeme projekta: 1 sat (ukupno 5 sati)
• Datoteka za podršku

Relativno novi dio CSS specifikacije, medijski upiti nesumnjivo su najuzbudljiviji aspekt responzivnog web dizajna i područje zrelo za daljnja eksperimentiranja.

Prihvativši potrebu za prilagodljivim izgledima, neki su medijske upite vidjeli kao sredstvo za naknadnu prilagodbu prilagodljivih izgleda na postojeća web mjesta s fiksnom širinom. Među onima koji su prihvatili responzivne izglede, mnogi su to učinili iz perspektive radne površine, skrivajući sadržaj i značajke kako se okvir za prikaz sužava.

Kroz ovaj tutorial koristili smo alternativni pristup, prije svega mobilni. Sada, dok nastojimo uključiti medijske upite, možemo razmišljati o tome dodavanje značajke kako se povećavaju nekretnine na zaslonu, sigurni u saznanje da oznake i dizajn koji podupiru našu web stranicu pružaju respektabilnu osnovnu vrijednost.

Danas ćemo prijeći naš portfelj uzoraka i izgraditi pojedinačne stranice potrebne za našu web stranicu. Pritom ćemo vidjeti kako se konstruiraju medijski upiti i implementirati ih na istinski reagirajući način.

01. Dodavanje medijskih upita

Budući da su komponente u našem portfelju uzoraka dovršene i rade izvan granica bilo kojeg izgleda, vrijeme je da ih premjestite na različite stranice koje čine našu web stranicu.

Počet ćemo s naše početne stranice. Iz dizajna usmjerenog na radnu površinu možemo vidjeti da bi se u širim okvirima prikaza naš izgled trebao pojaviti kako slijedi:

Uzimajući mjerenja iz našeg dizajna, možemo opisati područje dokumenta u CSS-u na sljedeći način:

.document {
popunjavanje: 0 5%;
}
.main {
širina: 74,242424242424%; / * 784/1056 * /
plutaju: lijevo;
}
.complementary {
širina: 22,727272727273%; / * 240/1056 * /
plutati: desno;
}

Kao što smo saznali u drugom dijelu ovog vodiča, koristimo sljedeću formulu za izračunavanje postotne širine ovih stupaca:

(cilj / kontekst) * 100 = rezultat

Kada promijenimo veličinu preglednika, vidjet ćemo da se raspored radne površine skalira od zaslona najmanje veličine do najvećeg. Naravno, kod malih veličina stupci su preuski, a duljine linija tako kratke da je sadržaj teško pročitati. Ovaj raspored želimo samo kad ima dovoljno prostora za rad.

Tu dolaze medijski upiti. Pod pretpostavkom da bi ovaj izgled trebao stupiti na snagu tek kada je preglednik širi od 768px, možemo dodati sljedeći CSS:

.document {
popunjavanje: 0 5%;
}
Zaslon @media i (minimalna širina: 768px) {
.main {
širina: 74,242424242424%; / * 784/1056 * /
plutaju: lijevo;
}
.complementary {
širina: 22,727272727273%; / * 240/1056 * /
plutati: desno;
}
}

Sada, kada je okvir za gledanje uži od 768px, sve unutar upita za medije zanemarit će se. Zanemarit će ga svaki preglednik koji također ne podržava medijske upite.

02. Anatomija medijskog upita

Da bismo razumjeli što se ovdje događa, pogledajmo kako se konstruira medijski upit. Možemo ga podijeliti na dva dijela:

• Zaslon @media: Prvi dio medijskog upita je vrsta medija. Možda ćete prepoznati ovu sintaksu ako ste ikad uključili stilove ispisa u svoj CSS. Naziv tipa možete prepoznati i iz mediji atribut na veza> element. To je zato što obje prihvaćaju odobreni skup vrsta medija koji se nalaze u CSS 2.1 specifikaciji.
• (minimalna širina: 768 piksela): Drugi dio je upit. To uključuje značajka za koje se traži (u ovom slučaju minimalna širina okvira za prikaz) i odgovarajuće vrijednost za testiranje (768px).

Kada govorimo o responzivnom web dizajnu, postoji tendencija da se usredotočimo na širinu, ali postoje i druge značajke za koje možemo testirati:

• (min- | max-) širina i (min- | max-) visina: Oni nam omogućuju ispitivanje širine i visine okvira za prikaz (tj. Prozora preglednika).
• (min- | max-) širina uređaja i (min- | max-) visina uređaja: Oni nam omogućuju upit o širini cijelog zaslona. Prema mom iskustvu, obično je razumnije postavljanje izgleda postaviti na okvir za prikaz, a ne na zaslon.
• orijentacija: Ovdje možete odmah razmišljati o mogućnostima; razmislite o aplikacijama koje prikazuju različit sadržaj na temelju orijentacije vašeg telefona - isto je moguće i na webu.
• (min- | max-) omjer slike: To nam omogućuje prilagodbu izgleda na temelju omjera prozora preglednika ...
• (min- | max-) omjer uređaja: ... i to nam omogućuje da učinimo isto na temelju omjera uređaja. Owen Gregory napisao je predivan članak prošle godine koji je istražio kako pomoću ovog upita možemo povezati svoj dizajn s uređajima na kojima se pojavljuju.
• (min- | max-) jednobojni: Također možemo testirati ima li uređaj jednobojni zaslon ili ne. Zamislite kako bi ovo bilo korisno da Amazonovi uređaji za e-ink Kindle ne lažu i ne prikazuju svoje zaslone u boji!

Posljednji dio našeg upita možda je najkorisniji. Pomoću i, možemo testirati više značajki u jednom upitu. Na primjer:

zaslon @media i (min-širina: 768px) i (orijentacija: pejzaž) {
...
}

Kao što vidite, medijski upiti mogu nam pomoći u stvaranju prilično uvjerljivih iskustava - a ja sam samo dodirnuo površinu. Ako tražite malo čitanja prije spavanja, mogli biste proći i gore nego pročitati specifikaciju upita W3C za medije koja opisuje sve značajke na koje možemo testirati.

03. Još jedna stvar ...

Iako smo u naš CSS uključili medijske upite, ako našu web stranicu pregledamo na mobilnom uređaju, primijetit ćete da se naša web lokacija i dalje prikazuje kao da je zaslon širi od 768px.

Da bismo razumjeli zašto se to događa, moramo uzeti kratku lekciju iz povijesti.

Kada je originalni iPhone najavljen 2007. godine, jedna od njegovih velikih prodajnih mogućnosti bila je mogućnost pregledavanja ‘pravog weba’, čak iako je to značilo web stranice usmjerene na radnu površinu fiksne širine koje je trebalo zbiti da stanu na njegov mali zaslon. IPhone je to mogao učiniti prijavivši da je njegov zaslon širok 980px, prije nego što je smanjio web stranice kako bi se uklopio u njegov zaslon širok 320px.

No, iPhone je predstavljen prije pojave responzivnog dizajna. Sad kad autori dizajniraju web stranice dizajnirane za mobilne uređaje, ova je značajka manje korisna. Srećom, Apple je uključio način zaobilaženja ovog ponašanja, a otkako su ga prihvatili drugi proizvođači, postao je gotovo zapravo standard. Jednostavno uključuje dodavanje singla meta element našeg označavanja:

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

To govori preglednicima koji gledaju na vidik da web stranicu ne treba smanjivati ​​i da se širina prozora preglednika tretira isto kao i ukupna širina uređaja. Nakon što dodamo ovaj redak, pojavit će se naša web stranica s predviđenim izgledom:

04. Odabir točaka prekida

Vratimo se našem medijskom upitu:

Zaslon @media i (minimalna širina: 768px) {
...
}

Vrijednosti na kojima se izgled prilagođava obično se nazivaju prelomnim točkama. Ako se sjećate, u drugom dijelu rekao sam da je upotreba piksela pokazatelj neodgovarajućeg razmišljanja, no ovdje sam odabrao 768px, vjerojatno zato što je to širina poznatog uređaja.

Umjesto da odabirete točke prekida na temelju karakteristika popularnih uređaja, učinkovitije je promatrati vrijednosti izvedene iz našeg sadržaja, na primjer, udobne duljine crta za čitanje ili maksimalnu veličinu slike.

Budući da se naš tip veličine koristi ems-om, čini se razumnim da i naši medijski upiti koriste ems. Zapravo to ima dodatnu korist. Kad korisnik promijeni veličinu teksta u pregledniku, stranice će se prilagoditi tako da koriste manje točke prekida. Ne samo da će se naša web stranica prilagoditi ovisno o veličini okvira za prikaz, već i veličini fonta. Zapravo, tek kad sam vidio kako Jeremy Keith demonstrira medijske upite temeljene na em, shvatio sam koliko mogu biti moćni.

Iako naš dizajn može pružiti neke naznake mogućih točaka prekida, često je najbolji način da ih odaberemo eksperimentiranjem. Prilagođavajući širinu prozora preglednika, zaključio sam da je 800px dobra širina za prebacivanje na složeniji izgled.

Kako mi, međutim, izražavamo 800 px u ems-u? Opet, možemo koristiti svoju formulu, ali koji je kontekst? Prilikom izračunavanja ems-a za medijske upite, kontekst je uvijek zadana veličina fonta preglednika bez obzira je li ta vrijednost nadjačana u vašem CSS-u. Ta je zadana vrijednost obično 16 piksela, što nam daje:

800 / 16 = 50

Sada možemo ažurirati naš medijski upit ovako:

Zaslon @media i (minimalna širina: 50em) {/ * 800px * /
...
}

05. Prilagođavanje naših sličica

Sjetit ćete se da smo u 2. dijelu oblikovali svoje minijature tako da odgovaraju. Ipak, kad slike unutar ovih minijatura dosegnu punu širinu, s jedne se strane s desne strane svake slike pojavljuje prostor s praznim prostorom. Opet, medijski upiti omogućuju nam da to popravimo.

Evo našeg izvornog CSS-a:

ol.media li.media-item {
boja pozadine: #fff;
marža: 0 4,16666666667% 4,16666666667% 0;
širina: 47,91666666667%;
plutaju: lijevo;
}
ol.media li.media-item: nth-child (2n) {
margina-desno: 0;
}

Točka u kojoj se pojavljuje taj bijeli prostor je upravo kad preglednik raste šire od 560px.Odabrat ćemo ovu vrijednost pri kojoj ćemo je zamijeniti za prikazivanje tri sličice po retku. To možemo učiniti dodavanjem sljedećeg CSS-a:

Zaslon @media i (minimalna širina: 35em) {
.media-item {
širina: 30,612244897959%; / * 240/784 * /
marža: 0 4,081632653061% 1,1429em 0; / * 0 32/784 16 piksela 0 * /
}
.media-item: nth-child (3n) {
margina-desno: 0;
}
}

Imajte na umu da u ovom medijskom upitu ne trebamo prepisivati ​​sve stilove potrebne za sličicu, već samo dijelove koje želimo prilagoditi.

Gledajući ovu promjenu u pregledniku, primijetit ćete da nema margine s desne strane svake druge sličice. To je zato što sljedeće CSS pravilo i dalje ostaje aktivno:

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

Moramo izmijeniti CSS u našem medijskom upitu da bismo poništili tu vrijednost:

Zaslon @media i (minimalna širina: 35em) {
.media-item {
širina: 30,612244897959%; / * 240/784 * /
marža: 0 4,081632653061% 1,1429em 0; / * 0 32/784 16 piksela 0 * /
}
.media-item: nth-child (2n) {
marža-desno: 4,081632653061%;
}
.media-item: nth-child (3n) {
margina-desno: 0;
}
}

Kada stvarate medijske upite, uvijek budite svjesni takvih problema s nasljeđivanjem.

06. Ne samo širina

Važno je razmišljati o medijskim upitima ne samo u smislu širine, već i drugih varijabli. Primjerice, videozapis na našoj stranici medijskih stavki djelomično je skriven kada se visina okvira za prikaz smanji. Imamo tehnologiju:

.media-object-wrapper {
podnožje: 56,25%;
širina: 100%;
visina: 0;
položaj: relativan;
}
zaslon @media i (max-visina: 35em) i (orijentacija: pejzaž) {/ * 560px * /
.media-object-wrapper {
širina: 60%;
donji dio: 33,75%;
}
}

Čak sam uključio i upit za orijentaciju kako bih dodatno usavršio ovo ponašanje.

Sličan pristup možemo slijediti i za ostale dijelove našeg dizajna, zamijenivši veću verziju zaglavlja i pomičući navigacijske veze na vrh stranice kad prostor postane dostupan.

• Pogledajte našu prilagodljivu početnu stranicu
• Pogledajte našu responzivnu stranicu s medijskim stavkama

I eto ga! Izradili smo responzivno web mjesto - a ima i slobodnog dana! Pa, ne baš. Fleksibilni rasporedi, slike i upiti za medije samo su početak procesa responzivnog dizajna.

Sutra: U završnom dijelu ovog vodiča ići ćemo dalje od responzivnog web dizajna i pogledati kako možemo izraditi istinski responzivne web stranice.

Paul je dizajner interakcija sa sjedištem u Brightonu u Engleskoj. Najsretniji je kada izrađuje jednostavna, ali zanimljiva sučelja koja su izvorna za web.