Vsebina
- 01. Dodajanje medijskih poizvedb
- 02. Anatomija medijske poizvedbe
- 03. Še nekaj ...
- 04. Izbira mejnih vrednosti
- 05. Prilagajanje naših sličic
- 06. Ne samo širina
- Potrebno znanje: Vmesni CSS in HTML
- Zahteva: Urejevalnik besedil, sodobni brskalnik, grafična programska oprema
- Čas projekta: 1 ura (skupaj 5 ur)
- Datoteka za podporo
Sorazmerno nov del specifikacije CSS, medijske poizvedbe so nedvomno najbolj vznemirljiv vidik odzivnega spletnega oblikovanja in območje, ki je zrelo za nadaljnje eksperimentiranje.
Potem ko so sprejeli potrebo po prilagodljivih postavitvah, so nekateri medijske poizvedbe videli kot sredstvo za naknadno vgradnjo prilagodljivih postavitev na obstoječa spletna mesta s fiksno širino. Med tistimi, ki so sprejeli odzivne postavitve, so mnogi to storili z vidika namizja, pri čemer se vsebina in funkcije skrivajo, ko se pogled zmanjšuje.
V tej vadnici smo uporabili alternativni pristop, najprej mobilni. Zdaj, ko želimo vključiti medijske poizvedbe, lahko razmišljamo o tem dodajanje funkcije, ko se nepremičnine na zaslonu povečujejo, varne pri zavedanju, da oznake in zasnova, na katerih temelji naše spletno mesto, zagotavljajo ugledno izhodišče.
Danes bomo presegli portfelj vzorcev in ustvarili posamezne strani, potrebne za naše spletno mesto. Pri tem bomo videli, kako se gradijo medijske poizvedbe, in jih izvedli na resnično odziven način.
01. Dodajanje medijskih poizvedb
Ker so komponente v našem portfelju vzorcev popolne in delujejo zunaj okvirov katere koli postavitve, je čas, da jih premaknete na različne strani, ki sestavljajo naše spletno mesto.
Začeli bomo z našo domačo stranjo. Iz zasnove, usmerjene k namizju, vidimo, da bi morala biti naša postavitev v širših prikaznih oknih prikazana tako:
Z meritvami iz naše zasnove lahko področje dokumenta v CSS opišemo na naslednji način:
.document {
oblazinjenje: 0 5%;
}
.main {
širina: 74,242424242424%; / * 784/1056 * /
plovec: levo;
}
.complementary {
širina: 22,727272727273%; / * 240/1056 * /
plovec: desno;
}
Kot smo izvedeli v drugem delu te vadnice, za izračun odstotne širine teh stolpcev uporabljamo naslednjo formulo:
(cilj / kontekst) * 100 = rezultat
Ko spremenimo velikost brskalnika, bomo videli, da se postavitev namizja spreminja od zaslona najmanjše velikosti do največjega. Seveda so pri majhnih stolpcih stolpci preozki in dolžine vrstic tako kratke, da je vsebino težko brati. To postavitev želimo le, če je na voljo dovolj prostora za njeno delovanje.
Tu pridejo medijske poizvedbe. Če predpostavimo, da bi morala ta postavitev veljati šele, ko je brskalnik širši od 768 px, lahko dodamo naslednji CSS:
.document {
oblazinjenje: 0 5%;
}
zaslon @media in (najmanjša širina: 768 slikovnih pik) {
.main {
širina: 74,242424242424%; / * 784/1056 * /
plovec: levo;
}
.complementary {
širina: 22,727272727273%; / * 240/1056 * /
plovec: desno;
}
}
Zdaj, ko bo okno za ogled ožje od 768 px, bo vse v medijski poizvedbi prezrto. Vsak brskalnik, ki ne podpira tudi medijskih poizvedb, ga bo prezrl.
02. Anatomija medijske poizvedbe
Da bi razumeli, kaj se tukaj dogaja, si oglejmo, kako je zgrajena predstavnostna poizvedba. Lahko ga razdelimo na dva dela:
- Zaslon @media: Prvi del medijske poizvedbe je vrsta medija. To sintakso boste morda prepoznali, če ste v svoj CSS kdaj vključili sloge tiskanja. Ime tipa lahko prepoznate tudi v medijev atribut na povezava> element. To pa zato, ker oba sprejmeta odobreni nabor vrst medijev, ki jih najdemo v specifikaciji CSS 2.1.
- (najmanjša širina: 768px): Drugi del je poizvedba. To vključuje funkcija za poizvedbo (v tem primeru najmanjša širina vidnega polja) in ustrezna vrednost za preizkus (768px).
Ko govorimo o odzivnem spletnem oblikovanju, se težnja osredotočamo na širino, vendar lahko preizkusimo tudi druge funkcije:
- (min- | max-) širina in (min- | max-) višina: Ti nam omogočajo, da poizvedujemo po širini in višini prikaza (tj. Okno brskalnika).
- (min- | max-) širina naprave in (min- | max-) višina naprave: Ti nam omogočajo, da poizvedujemo po širini celotnega zaslona. Po mojih izkušnjah je ponavadi bolj smiselno, da postavitve postavite na pogled in ne na zaslon.
- orientacija: Tu lahko takoj pomislite na možnosti; pomislite na aplikacije, ki prikazujejo drugačno vsebino glede na usmerjenost vašega telefona - enako je mogoče tudi v spletu.
- (min- | max-) razmerje stranic: To nam omogoča prilagoditev postavitev glede na razmerje okna brskalnika ...
- (min- | max-) razmerje stranic naprave: … In to nam omogoča, da to storimo glede na razmerje stranic naprave. Owen Gregory je lani napisal čudovit članek, v katerem je raziskal, kako lahko to poizvedbo povežemo z napravami, na katerih so prikazani.
- (min- | max-) enobarvna: Prav tako lahko preizkusimo, ali ima naprava enobarvni zaslon ali ne. Predstavljajte si, kako koristno bi bilo to, če Amazonove naprave e-ink Kindle ne bi lagale in svoje zaslone prijavile kot barvne!
Zadnji del naše poizvedbe je morda najbolj uporaben. Z uporabo in, lahko v eni poizvedbi preizkusimo več funkcij. Na primer:
zaslon @media in (najmanjša širina: 768 slikovnih pik) in (usmeritev: ležeče) {
...
}
Kot lahko vidite, nam medijska vprašanja lahko pomagajo ustvariti dokaj prepričljive izkušnje - in dotaknil sem se le površine. Če iščete lahkotno branje pred spanjem, bi lahko storili slabše, kot če bi prebrali specifikacijo medijske poizvedbe W3C, ki opisuje vse funkcije, ki jih lahko preizkusimo.
03. Še nekaj ...
Čeprav smo v naš CSS vključili medijske poizvedbe, če si spletno mesto ogledamo v mobilni napravi, boste opazili, da se naše spletno mesto še vedno upodablja, kot da je zaslon širši od 768 slikovnih pik.
Da bi razumeli, zakaj se to dogaja, moramo narediti kratek pouk zgodovine.
Ko je bil prvotni iPhone predstavljen leta 2007, je bila ena njegovih največjih prodajnih točk sposobnost brskanja po 'pravem spletu', četudi je to pomenilo namizno usmerjena spletna mesta s fiksno širino, ki jih je bilo treba strti, da se prilegajo njegovemu majhnemu zaslonu. IPhone je to lahko storil tako, da je zaslon poročal o širini 980 slikovnih pik, nato pa je spletne strani zmanjšal tako, da so ustrezale njegovemu zaslonu s 320 slikovnimi pikami.
Toda iPhone je bil predstavljen pred pojavom odzivnega dizajna. Zdaj, ko avtorji oblikujejo spletna mesta, zasnovana za mobilne naprave, je ta funkcija manj uporabna. Na srečo je Apple vključil način, kako zaobiti to vedenje, in odkar so ga sprejeli drugi proizvajalci, je postal skoraj de facto standard. Preprosto vključuje dodajanje singla meta element našega označevanja:
meta name = "viewport" content = "Initial-scale = 1.0, width = device-width" />
To brskalnikom, ki se zavedajo pogleda, sporoča, da se spletnega mesta ne sme zmanjšati in da mora biti širina okna brskalnika enaka celotni širini naprave. Ko bomo dodali to vrstico, se bo naše spletno mesto prikazalo s predvideno postavitvijo:
04. Izbira mejnih vrednosti
Vrnimo se k naši medijski poizvedbi:
zaslon @media in (najmanjša širina: 768 slikovnih pik) {
...
}
Vrednosti, pri katerih se postavitev prilagodi, se običajno imenujejo mejne točke. Če se spomnite, sem v drugem delu rekel, da je uporaba pikslov znak neodzivnega razmišljanja, vendar sem tukaj izbral 768px, verjetno zato, ker gre za širino znane naprave.
Namesto da bi izbrali prekinitvene točke na podlagi značilnosti priljubljenih naprav, je lahko učinkoviteje preučiti vrednosti, ki izhajajo iz naše vsebine, na primer udobne dolžine črt za branje ali največjo velikost slike.
Ker je naša vrsta velikosti z uporabo ems-a, se zdi smiselno, da tudi naša medijska vprašanja uporabljajo ems. Dejansko ima to dodatno korist. Ko uporabnik spremeni velikost besedila v brskalniku, se strani prilagodijo tako, da uporabijo manjše točke meje. Ne samo, da se bo naše spletno mesto prilagodilo glede na velikost prikaza, temveč tudi velikost pisave. Pravzaprav sem šele, ko sem videl, kako Jeremy Keith demonstrira medijske poizvedbe na osnovi em, ugotovil, kako močni bi lahko bili.
Čeprav lahko naša zasnova nekaj nakaže možne prekinitvene točke, je pogosto najboljši način, da jih izberemo z eksperimentiranjem. S prilagoditvijo širine okna brskalnika sem se odločil, da je 800 slikovnih pik dobra širina, s katero lahko zamenjamo za bolj zapleteno postavitev.
Kako pa izrazimo 800px v ems? Spet lahko uporabimo svojo formulo, toda kakšen je kontekst? Pri izračunu ems za medijske poizvedbe je kontekst vedno privzeta velikost pisave brskalnika ne glede na to, ali je bila ta vrednost v vašem CSS preglašena. Privzeta vrednost je običajno 16 slikovnih pik, kar nam daje:
800 / 16 = 50
Zdaj lahko svojo medijsko poizvedbo posodobimo tako:
zaslon @media in (najmanjša širina: 50em) {/ * 800px * /
...
}
05. Prilagajanje naših sličic
Spomnili se boste, da smo v 2. delu sličice oblikovali tako, da so odzivne. Ko pa slike znotraj teh sličic dosežejo celotno širino, se na vsaki strani slike prikaže območje praznega prostora. Ponovna poizvedba v medijih nam omogoča, da to popravimo.
Tu je naš originalni CSS:
ol.media li.media-item {
barva ozadja: #fff;
marža: 0 4,16666666667% 4,16666666667% 0;
širina: 47,91666666667%;
plovec: levo;
}
ol.media li.media-item: nth-child (2n) {
rob desno: 0;
}
Točka, na kateri se pojavi ta presledek, je ravno takrat, ko brskalnik raste širše od 560 slikovnih pik.Izbrali bomo to vrednost, pri kateri bomo zamenjali prikaz treh sličic na vrstico. To lahko storimo tako, da dodamo naslednji CSS:
zaslon @media in (najmanjša širina: 35em) {
.media-item {
širina: 30,612244897959%; / * 240/784 * /
marža: 0 4,081632653061% 1,1429em 0; / * 0 32/784 16 px 0 * /
}
.media-item: nth-child (3n) {
rob desno: 0;
}
}
Upoštevajte, da nam v tej predstavnostni poizvedbi ni treba prepisovati vseh slogov, ki so potrebni za sličico, temveč le tiste dele, ki jih želimo prilagoditi.
Če si ogledate to spremembo v brskalniku, boste opazili, da na vsaki drugi sličici ni roba na desni. To je zato, ker je naslednje pravilo CSS še vedno aktivno:
ol.media li.media-item: nth-child (2n) {
rob desno: 0;
}
Za ponastavitev te vrednosti moramo v naši medijski poizvedbi spremeniti CSS:
zaslon @media in (najmanjša širina: 35em) {
.media-item {
širina: 30,612244897959%; / * 240/784 * /
marža: 0 4,081632653061% 1,1429em 0; / * 0 32/784 16 px 0 * /
}
.media-item: nth-child (2n) {
rob desno: 4,081632653061%;
}
.media-item: nth-child (3n) {
rob desno: 0;
}
}
Pri ustvarjanju medijskih poizvedb se vedno zavedajte takšnih težav z dedovanjem.
06. Ne samo širina
Pomembno je, da o medijskih poizvedbah razmišljamo ne le glede širine, temveč tudi drugih spremenljivk. Na primer, video na naši strani z medijskimi predmeti je delno skrit, ko se višina vidnega polja zmanjša. Imamo tehnologijo:
.media-object-wrapper {
polnilo-dno: 56,25%;
širina: 100%;
višina: 0;
položaj: sorodnik;
}
zaslon @media in (največja višina: 35em) in (usmeritev: ležeče) {/ * 560px * /
.media-object-wrapper {
širina: 60%;
oblazinjenje-dno: 33,75%;
}
}
Vključil sem celo orientacijsko poizvedbo za nadaljnje izboljšanje tega vedenja.
Podoben pristop lahko sledimo tudi za druge dele našega oblikovanja, zamenjamo večjo različico glave in navigacijske povezave premaknemo na vrh strani, ko postane prostor na voljo.
- Oglejte si našo odzivno domačo stran
- Oglejte si našo odzivno stran z medijskimi predmeti
In tam imamo! Izdelali smo odzivno spletno mesto - in na voljo še en dan! No, ne čisto. Prilagodljive postavitve, slike in poizvedbe po medijih so šele začetek odzivnega postopka oblikovanja.
Jutri: V zadnjem delu te vaje bomo presegli odzivno spletno oblikovanje in si ogledali, kako lahko izdelamo resnično odzivna spletna mesta.
Paul je oblikovalec interakcij s sedežem v Brightonu v Angliji. Najsrečnejši je pri izdelavi preprostih, a privlačnih vmesnikov, ki so domači v spletu.
