Sukurkite reaguojančią svetainę per savaitę: žiniasklaidos užklausos (4 dalis)

Turinys

• 01. Medijos užklausų pridėjimas
• 02. Medijos užklausos anatomija
• 03. Dar vienas dalykas ...
• 04. Lūžio taškų pasirinkimas
• 05. Mūsų miniatiūrų koregavimas
• 06. Ne tik plotis

• Reikalingos žinios: Tarpinis CSS ir HTML
• Reikalinga: Teksto redaktorius, moderni naršyklė, grafikos programinė įranga
• Projekto laikas: 1 valanda (iš viso 5 val.)
• Palaikymo byla

Santykinai nauja CSS specifikacijos dalis, žiniasklaidos užklausos yra neabejotinai įdomiausias reaguojančio interneto dizaino aspektas ir tinkama sritis tolesniems eksperimentams.

Priėmę adaptyvių maketų poreikį, kai kurie žiniasklaidos užklausas matė kaip priemonę pritaikyti adaptyvius maketus esamose fiksuoto pločio svetainėse. Tarp tų, kurie pritaikė reaguojančius maketus, daugelis tai padarė iš darbalaukio perspektyvos, slėpdami turinį ir funkcijas siaurėjant peržiūros sričiai.

Per šią mokymo programą mes pasirinkome alternatyvų, pirmiausia mobilųjį, metodą. Dabar, kai norime įtraukti žiniasklaidos užklausas, galime pagalvoti pridedant funkcijos, kai padidėja nekilnojamojo turto ekranas, saugu žinant, kad mūsų svetainę pagrindžiantis žymėjimas ir dizainas suteikia garbingą pagrindą.

Šiandien mes peržengsime savo modelių portfelio ribas ir sukursime atskirus puslapius, reikalingus mūsų svetainei. Tai atlikdami pamatysime, kaip kuriamos žiniasklaidos užklausos, ir įgyvendinsime jas tikrai reaguodami.

01. Medijos užklausų pridėjimas

Kai mūsų modelių portfelio komponentai yra baigti ir dirba ne bet kuriame išdėstyme, atėjo laikas juos perkelti į skirtingus mūsų svetainę sudarančius puslapius.

Pradėsime nuo savo pagrindinio puslapio. Iš darbalaukio orientuoto dizaino matome, kad platesniuose peržiūros laukuose mūsų išdėstymas turėtų būti toks:

Atlikdami matavimus pagal savo projektą, dokumento sritį CSS galime apibūdinti taip:

.dokumentas {
užpildas: 0 5%;
}
.main {
plotis: 74,242424242424%; / * 784/1056 * /
plūdė: kairė;
}
.papildomas {
plotis: 22,727272727273%; / * 240/1056 * /
plūdė: dešinė;
}

Kaip sužinojome antroje šios mokymo programos dalyje, apskaičiuodami šių stulpelių procentinį plotį naudojame šią formulę:

(taikinys / kontekstas) * 100 = rezultatas

Kai pakeisime savo naršyklės dydį, pamatysime, kad darbalaukio išdėstymas keičiamas nuo mažiausio dydžio ekrano iki didžiausio. Be abejo, mažų dydžių stulpeliai yra per siauri, o linijų ilgiai tokie trumpi, kad turinį sunku perskaityti. Šio maketo norime tik tada, kai yra pakankamai vietos darbui.

Čia kyla žiniasklaidos užklausos. Darant prielaidą, kad šis išdėstymas turėtų įsigalioti tik tada, kai naršyklė yra didesnė nei 768 taškų, galime pridėti šį CSS:

.dokumentas {
užpildas: 0 5%;
}
„@media“ ekranas ir (min. plotis: 768 taškų) {
.main {
plotis: 74,242424242424%; / * 784/1056 * /
plūdė: kairė;
}
.papildomas {
plotis: 22,727272727273%; / * 240/1056 * /
plūdė: dešinė;
}
}

Dabar, kai peržiūros sritis yra siauresnė nei 768 taškų, viskas, kas yra medijos užklausoje, bus ignoruojama. Jo nepaisys jokia naršyklė, kuri taip pat nepalaiko medijos užklausų.

02. Medijos užklausos anatomija

Norėdami suprasti, kas čia vyksta, pažiūrėkime, kaip kuriama medijos užklausa. Mes galime jį padalyti į dvi dalis:

• @media ekranas: Pirmoji medijos užklausos dalis yra medijos tipas. Šią sintaksę galite atpažinti, jei kada nors į savo CSS įtraukėte spausdinimo stilių. Tipo pavadinimą taip pat galite atpažinti iš žiniasklaida atributas nuoroda> elementas. Taip yra todėl, kad abu priima patvirtintą medijos tipų rinkinį, pateiktą CSS 2.1 specifikacijoje.
• (min. plotis: 768 tšk.): Antroji dalis yra užklausa. Tai apima funkcija reikia užduoti (šiuo atveju mažiausią peržiūros srities plotį) ir atitinkamą vertė patikrinti (768px).

Kai kalbame apie interaktyvų interneto dizainą, yra tendencija sutelkti dėmesį į plotį, tačiau galime išbandyti ir kitas funkcijas:

• (min- | max-) plotis ir (min- | max-) aukštis: Tai leidžia mums pateikti užklausą dėl peržiūros srities (t. Y. Naršyklės lango) pločio ir aukščio.
• (min- | max-) prietaiso plotis ir (min- | max-) įrenginio aukštis: Tai leidžia mums pateikti užklausą dėl viso ekrano pločio. Mano patirtis rodo, kad paprastai yra prasmingiau išdėstyti vaizdus, ​​o ne ekraną.
• orientacija: Čia galite iš karto pagalvoti apie galimybes; pagalvokite apie programas, kuriose rodomas skirtingas turinys, atsižvelgiant į jūsų telefono orientaciją - tas pats įmanoma ir žiniatinklyje.
• (min- | max-) kraštinių santykis: Tai leidžia mums pritaikyti maketus pagal naršyklės lango santykį ...
• (min- | max-) įrenginio ir vaizdo santykis: ... ir tai leidžia mums padaryti tą patį, atsižvelgiant į įrenginio formato santykį. Owenas Gregory pernai parašė nuostabų straipsnį, kuriame buvo ištirta, kaip mes galime naudoti šią užklausą susieti savo dizainą su įrenginiais, kuriuose jie rodomi.
• (min- | max-) vienspalvis: Taip pat galime patikrinti, ar įrenginyje yra vienspalvis ekranas, ar ne. Įsivaizduokite, kaip tai būtų naudinga, jei „Amazon“ el. Rašalo „Kindle“ įrenginiai nemeluotų ir praneštų, kad jų ekranai yra spalvoti!

Galutinė mūsų užklausos dalis yra galbūt naudingiausia. Naudojant ir, mes galime išbandyti kelias ypatybes vienoje užklausoje. Pavyzdžiui:

@media ekranas ir (min-plotis: 768px) ir (orientacija: peizažas) {
...
}

Kaip matote, žiniasklaidos užklausos gali padėti mums sukurti gana įtikinamą patirtį - ir aš paliečiau tik paviršių. Jei norite šiek tiek skaityti prieš miegą, galite padaryti blogiau, nei perskaityti W3C medijos užklausos specifikaciją, kurioje aprašomos visos funkcijos, kurias galime išbandyti.

03. Dar vienas dalykas ...

Nors į savo CSS įtraukėme žiniasklaidos užklausas, jei peržiūrėsime savo svetainę mobiliajame įrenginyje, pastebėsite, kad mūsų svetainė vis tiek pateikiama taip, lyg ekranas būtų platesnis nei 768 taškų.

Norėdami suprasti, kodėl taip vyksta, turime surengti trumpą istorijos pamoką.

Kai 2007 m. Buvo paskelbtas originalus „iPhone“, vienas iš didžiausių jo pardavimo taškų buvo galimybė naršyti „tikrąjį internetą“, net jei tai reikštų fiksuoto pločio darbalaukiui skirtas svetaines, kurias reikėjo sutramdyti, kad tilptų į mažą ekraną. „IPhone“ sugebėjo tai padaryti pranešdamas, kad jo ekranas yra 980 taškų pločio, prieš sumažindamas tinklalapius, kad atitiktų 320 taškų pločio ekraną.

Tačiau „iPhone“ buvo pristatytas prieš atsirandant reaguojančiam dizainui. Dabar, kai autoriai kuria svetaines, skirtas mobiliesiems, ši funkcija yra mažiau naudinga. Laimei, „Apple“ įtraukė būdą apeiti šį elgesį, ir kadangi jį priėmė kiti gamintojai, jis tapo beveik de facto standartas. Tai paprasčiausiai apima singlo pridėjimą meta elementas mūsų žymėjimui:

meta name = "viewport" content = "pradinė skalė = 1,0, plotis = įrenginio plotis" />

Tai rodo peržiūros sritį naudojančioms naršyklėms, kad svetainė neturėtų būti mažinama ir kad naršyklės lango plotis turėtų būti vertinamas taip pat, kaip ir bendras įrenginio plotis. Kai pridėsime šią eilutę, mūsų svetainė pasirodys su numatytu išdėstymu:

04. Lūžio taškų pasirinkimas

Grįžkime prie žiniasklaidos užklausos:

„@media“ ekranas ir (min. plotis: 768 piks.) {
...
}

Vertės, kuriomis maketas pritaikomas, paprastai vadinamos lūžio taškais. Jei atsimenate, antroje dalyje sakiau, kad pikselių naudojimas rodo nereaguojantį mąstymą, tačiau čia aš pasirinkau 768 taškų, turbūt todėl, kad jis yra pažįstamo įrenginio plotis.

Užuot pasirinkę lūžio taškus pagal populiarių įrenginių charakteristikas, gali būti efektyviau žiūrėti į vertes, gaunamas iš mūsų turinio, pavyzdžiui, patogų eilučių ilgį skaitymui ar maksimalų vaizdo dydį.

Kai mūsų tipas yra dydžio naudojant EM, atrodo, kad mūsų žiniasklaidos užklausose yra tikslinga naudoti ir EM. Iš tikrųjų tai daro papildomą naudą. Kai vartotojas pakeičia teksto dydį naršyklėje, puslapiai bus pritaikyti naudoti mažesnius lūžio taškus. Mūsų svetainė prisitaikys ne tik pagal peržiūros srities dydį, bet ir šrifto dydį. Tiesą sakant, tik tada, kai pamačiau, kaip Jeremy Keithas demonstruoja žiniasklaidos klausimus, pagrįstus emais, supratau, kokie jie gali būti galingi.

Nors mūsų projektas gali pateikti tam tikrus galimų lūžio taškų nurodymus, dažnai geriausias būdas juos pasirinkti yra eksperimentai. Koreguodamas naršyklės lango plotį, nusprendžiau, kad 800 taškų yra geras plotis, kurį reikia pakeisti sudėtingesniu išdėstymu.

Vis dėlto kaip mes išreiškiame 800 piks. Vėlgi, mes galime naudoti savo formulę, bet koks yra kontekstas? Skaičiuojant daugialypės terpės užklausas, kontekstas visada yra numatytasis naršyklės šrifto dydis neatsižvelgiant į tai, ar ši vertė buvo nepaisyta jūsų CSS. Šis numatytasis nustatymas paprastai yra 16 taškų, o tai suteikia mums:

800 / 16 = 50

Dabar mes galime atnaujinti savo žiniasklaidos užklausą taip:

„@media“ ekranas ir (min. plotis: 50em) {/ * 800px * /
...
}

05. Mūsų miniatiūrų koregavimas

Jūs atsiminsite, kad 2 dalyje mes sukūrėme savo miniatiūras, kad būtų atsakingi. Visgi, kai šių miniatiūrų vaizdai pasiekia visą plotį, kiekvieno vaizdo dešinėje atsiranda baltos erdvės sritis. Vėlgi, žiniasklaidos užklausos leidžia mums tai išspręsti.

Čia yra mūsų originalus CSS:

ol.media li.media-item {
fono spalva: #fff;
marža: 0 4.16666666667% 4.16666666667% 0;
plotis: 47.91666666667%;
plūdė: kairė;
}
ol.media li.media-item: n-asis vaikas (2n) {
paraštė-dešinė: 0;
}

Taškas, kuriame atsiranda ši balta erdvė, yra tokia, kai naršyklė tampa platesnė nei 560 taškų.Mes pasirinksime šią vertę, kurią pakeisdami rodysime tris miniatiūras kiekvienoje eilutėje. Tai galime padaryti pridėdami šią CSS:

@media ekranas ir (min-width: 35em) {
.media-item {
plotis: 30.612244897959%; / * 240/784 * /
marža: 0 4.081632653061% 1.1429em 0; / * 0 32/784 16px 0 * /
}
.media-item: n-asis vaikas (3n) {
paraštė-dešinė: 0;
}
}

Atminkite, kad nereikia perrašyti visų miniatiūrai reikalingų stilių šioje medijos užklausoje, tik tų dalių, kurias norime pritaikyti.

Peržiūrėdami šį pakeitimą naršyklėje, pastebėsite, kad kas antros miniatiūros dešinėje nėra jokio krašto. Taip yra todėl, kad ši CSS taisyklė vis tiek lieka aktyvi:

ol.media li.media-item: n-asis vaikas (2n) {
paraštė-dešinė: 0;
}

Turime pakeisti medijos užklausos CSS, kad iš naujo nustatytume šią vertę:

@media ekranas ir (min-width: 35em) {
.media-item {
plotis: 30.612244897959%; / * 240/784 * /
marža: 0 4.081632653061% 1.1429em 0; / * 0 32/784 16px 0 * /
}
.media-item: n-asis vaikas (2n) {
paraštė-dešinė: 4.081632653061%;
}
.media-item: n-asis vaikas (3n) {
paraštė-dešinė: 0;
}
}

Kurdami žiniasklaidos užklausas, visada atkreipkite dėmesį į tokias paveldėjimo problemas.

06. Ne tik plotis

Svarbu galvoti apie žiniasklaidos užklausas ne tik dėl pločio, bet ir apie kitus kintamuosius. Pavyzdžiui, vaizdo įrašas mūsų medijos elementų puslapyje yra dalinai paslėptas, kai sumažėja peržiūros srities aukštis. Mes turime technologiją:

.media-object-wrapper {
kamšalo dugnas: 56,25%;
plotis: 100%;
aukštis: 0;
padėtis: giminaitis;
}
„@media“ ekranas ir (maks. aukštis: 35em) ir (orientacija: gulsčias) {/ * 560px * /
.media-object-wrapper {
plotis: 60%;
kamšalo dugnas: 33,75%;
}
}

Aš netgi įtraukiau orientacijos užklausą, kad galėčiau dar labiau patikslinti šį elgesį.

Panašaus požiūrio galime laikytis ir kitose savo dizaino dalyse: pakeisdami didesnę antraštės versiją ir perkeldami naršymo nuorodas į puslapio viršų, kai atsiras vietos.

• Peržiūrėkite mūsų reaguojantį pagrindinį puslapį
• Peržiūrėkite mūsų interaktyvų medijos elementų puslapį

Ir mes turime tai! Mes sukūrėme interaktyvią svetainę - ir turėtume vieną dieną. Na, ne visai taip. Lankstus maketas, vaizdai ir medijos užklausos yra tik atsakingo projektavimo proceso pradžia.

Rytoj: Paskutinėje šios mokymo programos dalyje apžengsime interaktyvų interneto dizainą ir išnagrinėsime, kaip sukurti tikrai reaguojančias svetaines.

Paulas yra sąveikos dizaineris, įsikūręs Braitone, Anglijoje. Jis laimingiausias, kai kuria paprastas, tačiau patrauklias sąsajas, kurios yra žinomos internete.