Looge nädala jooksul tundlik sait: meediapäringud (4. osa)

Sisu

• 01. Meediumipäringute lisamine
• 02. Meediapäringu anatoomia
• 03. Veel üks asi ...
• 04. Murdepunktide valimine
• 05. Pisipiltide kohandamine
• 06. Mitte ainult laius

• Vajalikud teadmised: Vahepealne CSS ja HTML
• Vajab: Tekstiredaktor, kaasaegne brauser, graafikatarkvara
• Projekti aeg: 1 tund (kokku 5 tundi)
• Tugifail

CSS-i spetsifikatsiooni suhteliselt uus osa, meediumipäringud on kahtlemata kõige põnevam aspekt tundlikus veebikujunduses ja edasiseks katsetamiseks küps ala.

Olles nõustunud adaptiivsete paigutuste vajadusega, on mõned näinud meediumipäringuid vahendina kohandatavate paigutuste ümberehitamiseks olemasolevatele fikseeritud laiusega saitidele. Nende seas, kes on omaks võtnud tundliku paigutuse, on paljud seda teinud töölaua vaatevinklist, peites sisu ja funktsioone, kui vaateava kitseneb.

Selle õpetuse jooksul oleme kasutanud alternatiivset, kõigepealt mobiilset lähenemist. Nüüd, kui me tahame lisada meediapäringuid, võime mõelda lisades funktsioone, kui kinnisvara ekraan suureneb, olles ohutu teadmises, et meie saidi aluseks olev märgistus ja kujundus annavad auväärse aluse.

Täna liigume oma mustrite portfellist kaugemale ja koostame oma veebisaidi jaoks vajalikud üksikud lehed. Seda tehes näeme, kuidas meediapäringuid koostatakse, ja rakendame neid tõeliselt reageerival viisil.

01. Meediumipäringute lisamine

Kuna meie musterportfelli komponendid on täielikud ja töötavad väljaspool mis tahes kujunduse piire, on aeg viia need meie saidi erinevatele lehtedele.

Alustame oma kodulehelt. Töölauale orienteeritud kujundusest näeme, et laiemates vaateavades peaks meie paigutus ilmuma järgmiselt:

Kujunduse põhjal mõõtmisi tehes saame dokumendiala CSS-is kirjeldada järgmiselt:

.dokument {
polsterdus: 0 5%;
}
.main {
laius: 74,242424242424%; / * 784/1056 * /
ujuk: vasak;
}
. täiendav {
laius: 22,727272727273%; / * 240/1056 * /
ujuk: paremal;
}

Nagu me selle õpetuse teises osas õppisime, kasutame nende veergude protsendilaiuse arvutamiseks järgmist valemit:

(siht / kontekst) * 100 = tulemus

Kui muudame oma brauseri suurust, näeme, et meie töölaua paigutus muutub väiksema suurusega ekraanilt kõige suuremaks. Muidugi on väikeste suuruste korral veerud liiga kitsad ja joone pikkused nii lühikesed, et sisu on raskesti loetav. Soovime seda paigutust ainult siis, kui selle töötamiseks on piisavalt ruumi.

Siit tulevad meediumipäringud. Eeldades, et see paigutus peaks kehtima alles siis, kui brauser on laiem kui 768 pikslit, võime lisada järgmise CSS-i:

.dokument {
polsterdus: 0 5%;
}
@meediaekraan ja (min-laius: 768px) {
.main {
laius: 74,242424242424%; / * 784/1056 * /
ujuk: vasak;
}
. täiendav {
laius: 22,727272727273%; / * 240/1056 * /
ujuk: paremal;
}
}

Kui vaateava on kitsam kui 768 pikslit, eiratakse kõike meediumipäringu sees. Seda ignoreerib iga brauser, mis ei toeta ka meediumipäringuid.

02. Meediapäringu anatoomia

Siin toimuva mõistmiseks vaatame, kuidas meediumipäring koostatakse. Saame selle jagada kaheks osaks:

• @meediaekraan: Meediumipäringu esimene osa on meediumitüüp. Selle süntaksi võite ära tunda, kui olete kunagi oma CSS-i lisanud prindistiile. Tüübi nime võite ära tunda ka meedia atribuut link> element. Seda seetõttu, et mõlemad aktsepteerivad CSS 2.1 spetsifikatsioonist leitud kinnitatud meediumitüüpide komplekti.
• (min-laius: 768 pikslit): Teine osa on päring. See hõlmab ka tunnusjoon päring (antud juhul vaateava minimaalne laius) ja vastav väärtus testimiseks (768 pikslit).

Kui räägime tundlikust veebidisainist, kiputakse keskenduma laiusele, kuid on ka muid funktsioone, mida saame ka testida:

• (min- | max-) laius ja (min- | max-) kõrgus: Need võimaldavad meil päringuid teha vaateava laiusest ja kõrgusest (st brauseriaken).
• (min- | max-) seadme laius ja (min- | max-) seadme kõrgus: Need võimaldavad meil päringuid teha kogu kuva laiuses. Minu kogemuste kohaselt on tavaliselt mõistlikum paigutada paigutus vaate avale, mitte ekraanile.
• orientatsioon: Siin saate kohe mõelda võimalustele; mõelge rakendustele, mis näitavad telefoni sisu järgi erinevat sisu - sama on võimalik ka veebis.
• (min- | max-) kuvasuhe: See võimaldab meil kohandada paigutusi brauseriakna suhte alusel ...
• (min- | max-) seadme kuvasuhe: ... ja see võimaldab meil sama teha seadme kuvasuhte põhjal. Owen Gregory kirjutas eelmisel aastal suurepärase artikli, milles uuriti, kuidas saaksime seda päringut kasutada oma kujunduse sidumiseks seadmetega, millel need ilmuvad.
• (min- | max-) mustvalge: Samuti saame testida, kas seadmel on ühevärviline ekraan või mitte. Kujutage ette, kui kasulik oleks see, kui Amazoni e-ink Kindle seadmed ei valetaks ja teavitaksid nende ekraanidest värvilisena!

Meie päringu viimane osa on tõenäoliselt kõige kasulikum. Kasutades ja, saame ühes päringus testida mitut funktsiooni. Näiteks:

@ media ekraan ja (min-width: 768px) ja (orientation: landscape) {
...
}

Nagu näete, võivad meediaküsimused aidata meil luua üsna veenvaid kogemusi - ja ma olen ainult seda pinda puudutanud. Kui otsite kerget magamaminekut, võiksite teha halvemini kui lugeda W3C meediumipäringu spetsifikatsiooni, mis kirjeldab kõiki funktsioone, mida saame testida.

03. Veel üks asi ...

Kuigi oleme oma CSS-i lisanud meediumipäringud, märkate oma saiti mobiilseadmes vaadates, et meie saiti renderdatakse endiselt nii, nagu oleks kuva laiem kui 768 pikslit.

Et mõista, miks see juhtub, peame läbima lühikese ajalootunni.

Kui algne iPhone 2007. aastal välja kuulutati, oli selle üheks suureks müügipunktiks võimalus sirvida ’päris veebi’, isegi kui see tähendas fikseeritud laiusega töölauale suunatud saite, mis tuli väiksele ekraanile mahutamiseks kokku suruda. IPhone suutis seda teha, teatades, et kuvari laius on 980 pikslit, enne kui vähendate veebilehtede mahtu oma 320 pikslise laiusega ekraanile.

Kuid iPhone võeti kasutusele enne tundliku disaini tulekut. Nüüd, kui autorid kujundavad mobiilseadmetele mõeldud saite, on see funktsioon vähem kasulik. Õnneks sisaldas Apple selle käitumise vältimiseks vahendeid ja kuna teised tootjad on selle kasutusele võtnud, on sellest saanud peaaegu tegelikult standard. See hõlmab lihtsalt singli lisamist meta element meie märgistusele:

meta nimi = "vaateava" content = "esialgne skaala = 1,0, laius = seadme laius" />

See ütleb vaateava teadlikele brauseritele, et veebisaiti ei tohiks vähendada ja brauseriakna laiust tuleks käsitleda sama, mis seadme üldine laius. Kui oleme selle rea lisanud, ilmub meie veebisait kavandatud paigutusega:

04. Murdepunktide valimine

Naaseme meediumipäringu juurde:

@meediaekraan ja (min-laius: 768px) {
...
}

Väärtusi, mille korral paigutus kohandub, nimetatakse tavaliselt katkestuspunktideks. Kui meenutate, siis teises osas ütlesin, et pikslite kasutamine näitab reageerimatut mõtlemist, kuid siin olen siiski valinud 768 pikslit, ilmselt seetõttu, et see on tuttava seadme laius.

Selle asemel, et valida murdepunkte populaarsete seadmete omaduste põhjal, võib olla tõhusam vaadata meie sisult tuletatud väärtusi, näiteks mugavat joone pikkust lugemiseks või pildi maksimaalset suurust.

Kuna meie tüüpi suurust kasutatakse emide abil, tundub mõistlik, et ka meie meediaküsimused kasutavad emasid. Tegelikult on selle tegemisel täiendav eelis. Kui kasutaja muudab brauseris teksti suurust, kohanduvad lehed väiksemate katkestuspunktide kasutamiseks. Meie veebileht ei kohane mitte ainult vaateava suuruse, vaid ka fondi suuruse põhjal. Tegelikult sain alles siis, kui nägin, kuidas Jeremy Keith demonstreeris emapõhiseid meediaküsimusi, kui võimsad need võiksid olla.

Kuigi meie disain võib anda mõningaid viiteid võimalikele murdepunktidele, on sageli parim viis nende valimiseks katsetamise teel. Brauseriakna laiuse reguleerimisega olen otsustanud, et 800px on hea laius, millega saab keerukama paigutuse vahetada.

Kuidas me 800px emsides siiski väljendame? Jällegi võime kasutada oma valemit, kuid mis on kontekst? Meediumipäringute arvutamisel arvutatakse kontekst alati brauseri vaikimisi fondisuurus olenemata sellest, kas teie CSS-is on see väärtus alistatud. See vaikimisi on tavaliselt 16 pikslit, mis annab meile:

800 / 16 = 50

Nüüd saame meediumipäringut värskendada nii:

@meediaekraan ja (min-laius: 50em) {/ * 800px * /
...
}

05. Pisipiltide kohandamine

Mäletate, et 2. osas kujundasime oma pisipildid reageerivaks. Kuid kui nende pisipiltide kujutised on jõudnud täies laiuses, ilmub igast pildist paremale valge ruumi ala. Jällegi võimaldavad meediaküsimused seda parandada.

Siin on meie algne CSS:

ol.media li.media-item {
taustavärv: #fff;
marginaal: 0 4.16666666667% 4.16666666667% 0;
laius: 47,91666666667%;
ujuk: vasak;
}
ol.media li.media-item: n-nda laps (2n) {
paremäär: 0;
}

See tühimik kuvatakse hetkel, kui brauser kasvab 560 pikslist laiemaks.Valime selle väärtuse, et vahetada kolme pisipildi kuvamine rea kohta. Saame seda teha järgmise CSS-i lisamisega:

@ media ekraan ja (min-width: 35em) {
.media-item {
laius: 30,612244897959%; / * 240/784 * /
marginaal: 0 4.081632653061% 1.1429em 0; / * 0 32/784 16px 0 * /
}
.media-item: n-nd laps (3n) {
paremäär: 0;
}
}

Pange tähele, et me ei pea selles meediumipäringus kõiki pisipildi jaoks vajalikke stiile ümber kirjutama, vaid ainult neid osi, mida soovime kohandada.

Seda muudatust brauseris vaadates märkate, et igast teisest pisipildist paremal pole varu. Seda seetõttu, et järgmine CSS-reegel jääb endiselt aktiivseks:

ol.media li.media-item: n-nda laps (2n) {
paremäär: 0;
}

Selle väärtuse lähtestamiseks peame meediumipäringus CSS-i muutma:

@ media ekraan ja (min-width: 35em) {
.media-item {
laius: 30,612244897959%; / * 240/784 * /
marginaal: 0 4.081632653061% 1.1429em 0; / * 0 32/784 16px 0 * /
}
.media-item: n-nd laps (2n) {
paremäär: 4,081632653061%;
}
.media-item: n-nd laps (3n) {
paremäär: 0;
}
}

Meediumipäringute loomisel tuleb alati arvestada selliste pärandiprobleemidega.

06. Mitte ainult laius

Oluline on mõelda meediaküsimustele mitte ainult laiuse, vaid ka muude muutujate osas. Näiteks on meie meediaüksuste lehel olev video osaliselt peidetud, kui vaateava kõrgus väheneb. Meil on tehnoloogia:

.media-object-wrapper {
polsterdus: 56,25%;
laius: 100%;
kõrgus: 0;
positsioon: sugulane;
}
@media ekraan ja (max-height: 35em) ja (orientation: landscape) {/ * 560px * /
.media-object-wrapper {
laius: 60%;
polsterdus: 33,75%;
}
}

Olen selle käitumise täpsustamiseks lisanud isegi orientatsioonipäringu.

Saame järgida sarnast lähenemisviisi ka meie kujunduse muude osade puhul, vahetades päise suurema versiooni ja viies navigeerimislingid lehe ülaossa, kui ruumi saab.

• Vaadake meie tundlikku kodulehte
• Vaadake meie reageeriva meediaüksuse lehte

Ja meil on see olemas! Oleme loonud tundliku veebisaidi - ja varuks on päev! Noh, mitte päris. Paindlikud paigutused, pildid ja meediumipäringud on alles reageeriva kujundusprotsessi algus.

Homme: Selle õpetuse viimases osas läheme kaugemale tundlikust veebidisainist ja uurime, kuidas tõeliselt reageerivaid veebisaite luua.

Paul on Inglismaal Brightonis asuv interaktsioonidisainer. Ta on kõige õnnelikum, kui meisterdab lihtsaid, kuid samas köitvaid liideseid, mis on veebis levinud.