Nedēļas laikā izveidojiet atsaucīgu vietni: multivides vaicājumi (4. daļa)

Saturs

• 01. Mediju vaicājumu pievienošana
• 02. Mediju vaicājuma anatomija
• 03. Vēl viena lieta ...
• 04. Lūzuma punktu izvēle
• 05. Mūsu sīktēlu pielāgošana
• 06. Ne tikai platums

• Nepieciešamās zināšanas: Starpposma CSS un HTML
• Nepieciešama: Teksta redaktors, moderna pārlūkprogramma, grafikas programmatūra
• Projekta laiks: 1 stunda (kopā 5 stundas)
• Atbalsta fails

Salīdzinoši jauna CSS specifikācijas daļa, multivides vaicājumi neapšaubāmi ir aizraujošākais reaģējošā tīmekļa dizaina aspekts un apgabals, kas ir gatavs turpmākiem eksperimentiem.

Pieņemot nepieciešamību pēc adaptīviem izkārtojumiem, daži ir redzējuši multivides vaicājumus kā līdzekli, lai pielāgotu adaptīvos izkārtojumus esošajās fiksētā platuma vietnēs. Starp tiem, kuri ir izmantojuši atsaucīgus izkārtojumus, daudzi to ir darījuši no darbvirsmas perspektīvas, slēpjot saturu un funkcijas, jo skata punkts sašaurinās.

Šajā apmācībā mēs izmantojām alternatīvu, vispirms mobilo pieeju. Tagad, kad mēs vēlamies iekļaut plašsaziņas līdzekļu vaicājumus, mēs varam padomāt piebilstot funkcijas, palielinoties ekrāna nekustamajam īpašumam, droši zinot, ka mūsu vietnes pamatā esošie marķējumi un dizains nodrošina cienījamu pamatu.

Šodien mēs pārsniegsim mūsu modeļu portfeli un izveidosim atsevišķas lapas, kas nepieciešamas mūsu vietnei. To darot, mēs redzēsim, kā tiek veidoti multivides vaicājumi, un īstenosim tos patiesi atsaucīgā veidā.

01. Mediju vaicājumu pievienošana

Tā kā mūsu rakstu portfeļa komponenti ir pabeigti un darbojas ārpus jebkura izkārtojuma robežām, ir pienācis laiks tos pārvietot uz dažādām lapām, kas veido mūsu vietni.

Mēs sāksim ar mūsu mājas lapu. No darbvirsmas orientētā noformējuma mēs varam redzēt, ka plašākos skatu punktos mūsu izkārtojumam vajadzētu parādīties šādi:

Ņemot mērījumus no mūsu dizaina, dokumenta laukumu CSS varam aprakstīt šādi:

.document {
polsterējums: 0 5%;
}
.main {
platums: 74,242424242424%; / * 784/1056 * /
pludiņš: pa kreisi;
}
.papildu {
platums: 22,727272727273%; / * 240/1056 * /
pludiņš: pa labi;
}

Kā mēs uzzinājām šīs apmācības otrajā daļā, mēs izmantojam šādu formulu, lai aprēķinātu šo kolonnu procentuālo platumu:

(mērķis / konteksts) * 100 = rezultāts

Kad mēs mainīsim pārlūka izmēru, mēs redzēsim, ka mūsu darbvirsmas izkārtojums tiek mērogots no mazākā izmēra ekrāna līdz lielākajam. Protams, mazos izmēros kolonnas ir pārāk šauras, un līniju garums ir tik īss, ka saturu ir grūti nolasīt. Mēs vēlamies šo izkārtojumu tikai tad, kad ir pietiekami daudz vietas, lai tas darbotos.

Šeit rodas multivides vaicājumi. Pieņemot, ka šim izkārtojumam vajadzētu stāties spēkā tikai tad, ja pārlūkprogramma ir lielāka par 768 pikseļiem, mēs varam pievienot šādu CSS:

.document {
polsterējums: 0 5%;
}
@media ekrāns un (min-width: 768px) {
.main {
platums: 74,242424242424%; / * 784/1056 * /
pludiņš: pa kreisi;
}
.papildu {
platums: 22,727272727273%; / * 240/1056 * /
pludiņš: pa labi;
}
}

Kad skata punkts ir šaurāks par 768 pikseļiem, viss multivides vaicājumā tiks ignorēts. To ignorēs neviens pārlūks, kas arī neatbalsta multivides vaicājumus.

02. Mediju vaicājuma anatomija

Lai saprastu, kas šeit notiek, apskatīsim, kā tiek veidots multivides vaicājums. Mēs to varam sadalīt divās daļās:

• @media ekrāns: Mediju vaicājuma pirmā daļa ir multivides tips. Jūs, iespējams, atpazīsit šo sintaksi, ja kādreiz esat CSS iekļāvis drukas stilus. Jūs varat arī atpazīt tipa nosaukumu no plašsaziņas līdzekļi atribūts uz saite> elements. Tas ir tāpēc, ka abi pieņem apstiprināto datu nesēju tipu kopu, kas atrodama CSS 2.1 specifikācijā.
• (min. platums: 768 pikseļi): Otrā daļa ir vaicājumu. Tas ietver iezīme jāvaicā (šajā gadījumā skata punkta minimālais platums) un atbilstošo vērtība pārbaudīt (768px).

Kad mēs runājam par atsaucīgu tīmekļa dizainu, ir tendence koncentrēties uz platumu, taču ir arī citas funkcijas, kuras mēs varam pārbaudīt:

• (min- | max-) platums un (min- | max-) augstums: Tie ļauj mums vaicāt skata platuma un augstuma (t.i., pārlūkprogrammas loga) platumu.
• (min- | max-) ierīces platums un (min- | max-) ierīces augstums: Tie ļauj vaicāt visa displeja platumu. Pēc manas pieredzes parasti ir saprātīgāk izkārtojumus balstīt uz skatu, nevis uz displeju.
• orientācija: Šeit uzreiz varat domāt par iespējām; domājiet par lietotnēm, kurās tiek rādīts atšķirīgs saturs, pamatojoties uz tālruņa orientāciju - tas pats ir iespējams arī tīmeklī.
• (min- | max-) malu attiecība: Tas ļauj mums pielāgot izkārtojumus, pamatojoties uz pārlūkprogrammas loga attiecību ...
• (min- | max-) ierīces proporcijas: ... un tas ļauj mums darīt to pašu, pamatojoties uz ierīces malu attiecību. Ouens Gregorijs pagājušajā gadā uzrakstīja brīnišķīgu rakstu, kurā tika pētīts, kā mēs varam izmantot šo vaicājumu, lai piesaistītu mūsu dizainu ierīcēm, kurās tie parādās.
• (min- | max-) vienkrāsains: Mēs varam arī pārbaudīt, vai ierīcei ir vienkrāsains displejs. Iedomājieties, cik tas būtu noderīgi, ja Amazon e-ink Kindle ierīces nemelotu un neziņotu par to ekrāniem kā krāsu!

Mūsu vaicājuma pēdējā daļa, iespējams, ir visnoderīgākā. Izmantojot un, mēs varam pārbaudīt vairākas funkcijas vienā vaicājumā. Piemēram:

@media ekrāns un (min-width: 768px) un (orientācija: landscape) {
...
}

Kā redzat, plašsaziņas līdzekļu vaicājumi var palīdzēt mums izveidot diezgan pārliecinošu pieredzi - un es esmu pieskāries tikai virsmai. Ja jūs meklējat kādu vieglu lasīšanu pirms gulētiešanas, jūs varētu darīt sliktāk nekā lasīt W3C multivides vaicājuma specifikāciju, kurā aprakstītas visas funkcijas, kuras mēs varam pārbaudīt.

03. Vēl viena lieta ...

Lai gan mēs savā CSS esam iekļāvuši multivides vaicājumus, ja mēs skatāmies mūsu vietni mobilajā ierīcē, pamanīsit, ka mūsu vietne joprojām tiek renderēta tā, it kā displejs būtu platāks par 768 pikseļiem.

Lai saprastu, kāpēc tas notiek, mums jāveic īsa vēstures stunda.

Kad 2007. gadā tika paziņots par sākotnējo iPhone, viens no tā lielākajiem pārdošanas punktiem bija spēja pārlūkot “īsto tīmekli”, pat ja tas nozīmēja fiksēta platuma darbvirsmai paredzētas vietnes, kuras bija jāsamazina, lai tās ietilptu mazajā ekrānā. IPhone to varēja izdarīt, paziņojot, ka tā displejs ir 980 pikseļu plats, pirms tīmekļa lapas samazināja, lai tās ietilptu tā 320 pikseļu platajā ekrānā.

Bet iPhone tika ieviests pirms atsaucīga dizaina parādīšanās. Tagad, kad autori izstrādā vietnes, kas paredzētas mobilajām ierīcēm, šī funkcija ir mazāk noderīga. Par laimi, Apple ietvēra līdzekļus, lai apietu šo rīcību, un, tā kā to ir pieņēmuši citi ražotāji, tas ir kļuvis gandrīz par de facto standarta. Tas vienkārši ietver viena pievienošanu meta elements mūsu uzcenojumā:

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

Tas ļauj skatu portu pārzinošām pārlūkprogrammām pateikt, ka vietni nevajadzētu samazināt, un pārlūkprogrammas loga platumam ir jābūt tādam pašam kā ierīces kopējam platumam. Kad būsim pievienojuši šo rindu, mūsu vietne parādīsies ar paredzēto izkārtojumu:

04. Lūzuma punktu izvēle

Atgriezīsimies pie mūsu multivides vaicājuma:

@media ekrāns un (min-width: 768px) {
...
}

Vērtības, pie kurām izkārtojums pielāgojas, parasti sauc par pārtraukuma punktiem. Ja atceraties, otrajā daļā es teicu, ka pikseļu izmantošana norāda uz nereaģējošu domāšanu, tomēr šeit esmu izvēlējies 768 pikseļus, iespējams, tāpēc, ka tas ir pazīstamas ierīces platums.

Tā vietā, lai izvēlētos pārtraukuma punktus, pamatojoties uz populāru ierīču īpašībām, var būt efektīvāk aplūkot vērtības, kas iegūtas no mūsu satura, piemēram, ērtus līnijas garumus lasīšanai vai maksimālo attēla izmēru.

Tā kā mūsu tips tiek izmērīts, izmantojot ems, šķiet saprātīgi, ka mūsu plašsaziņas līdzekļu vaicājumos tiek izmantoti arī ems. Faktiski tam ir papildu ieguvums. Kad lietotājs pārlūkprogrammā maina teksta lielumu, lapas tiks pielāgotas, lai izmantotu mazākus pārtraukuma punktus. Mūsu vietne pielāgosies ne tikai skata, bet arī fonta lielumam. Faktiski tikai tad, kad es redzēju Džeremiju Kītu demonstrēt uz mediju jautājumiem balstītus vaicājumus, es sapratu, cik spēcīgi tie varētu būt.

Kaut arī mūsu dizains var sniegt zināmas norādes par iespējamiem pārtraukuma punktiem, bieži vien labākais veids, kā tos izvēlēties, ir eksperimentēšana. Pielāgojot pārlūkprogrammas loga platumu, esmu nolēmis, ka 800 pikseļi ir labs platums, ar kuru var pāriet uz sarežģītāku izkārtojumu.

Kā mēs tomēr izsakām 800 pikseļus ems? Atkal mēs varam izmantot mūsu formulu, bet kāds ir konteksts? Aprēķinot ems multivides vaicājumiem, konteksts vienmēr ir pārlūkprogrammas noklusējuma fonta lielums neatkarīgi no tā, vai šī vērtība ir ignorēta jūsu CSS. Šis noklusējums parasti ir 16 pikseļi, kas dod mums:

800 / 16 = 50

Tagad mēs varam atjaunināt savu multivides vaicājumu šādi:

@media ekrāns un (min-width: 50em) {/ * 800px * /
...
}

05. Mūsu sīktēlu pielāgošana

Jūs atceraties, ka 2. daļā mēs izveidojām sīktēlus, lai tie būtu atsaucīgi. Tomēr, kad šajos sīktēlos redzamie attēli sasniedz pilnu platumu, katra attēla labajā pusē parādās baltās atstarpes apgabals. Atkal mediju vaicājumi ļauj mums to novērst.

Šeit ir mūsu sākotnējā CSS:

ol.media li.media-item {
fona krāsa: #fff;
starpība: 0 4.16666666667% 4.16666666667% 0;
platums: 47.91666666667%;
pludiņš: pa kreisi;
}
ol.media li.media-item: n-bērns (2n) {
labā mala: 0;
}

Punkts, kurā parādās šī atstarpe, ir tieši tāds, ka pārlūks kļūst platāks par 560 pikseļiem.Mēs izvēlēsimies šo vērtību, lai mainītu trīs sīktēlus katrā rindā. Mēs to varam izdarīt, pievienojot šādu CSS:

@media ekrāns un (min-width: 35em) {
.media-item {
platums: 30.612244897959%; / * 240/784 * /
starpība: 0 4.081632653061% 1.1429em 0; / * 0 32/784 16px 0 * /
}
.media-item: n-bērns (3n) {
labā mala: 0;
}
}

Ņemiet vērā, ka mums nav jāpārraksta visi stili, kas nepieciešami sīktēlam šajā multivides vaicājumā, tikai tās daļas, kuras mēs vēlamies pielāgot.

Apskatot šīs izmaiņas pārlūkprogrammā, jūs ievērosiet, ka katra otrā sīktēla labajā pusē nav atstarpes. Tas ir tāpēc, ka šāds CSS noteikums joprojām ir aktīvs:

ol.media li.media-item: n-bērns (2n) {
labā mala: 0;
}

Lai atiestatītu šo vērtību, mums multivides vaicājumā ir jāmaina CSS:

@media ekrāns un (min-width: 35em) {
.media-item {
platums: 30.612244897959%; / * 240/784 * /
starpība: 0 4.081632653061% 1.1429em 0; / * 0 32/784 16px 0 * /
}
.media-item: n-bērns (2n) {
labā mala: 4.081632653061%;
}
.media-item: n-bērns (3n) {
labā mala: 0;
}
}

Veidojot multivides vaicājumus, vienmēr ņemiet vērā šādus mantojuma jautājumus.

06. Ne tikai platums

Ir svarīgi domāt par multivides vaicājumiem ne tikai attiecībā uz platumu, bet arī par citiem mainīgajiem. Piemēram, videoklips mūsu multivides vienumu lapā tiek daļēji paslēpts, kad skata loga augstums samazinās. Mums ir tehnoloģija:

.media-object-wrapper {
polsterējums-dibens: 56,25%;
platums: 100%;
augstums: 0;
amats: radinieks;
}
@media ekrāns un (max-height: 35em) un (orientācija: ainava) {/ * 560px * /
.media-object-wrapper {
platums: 60%;
polsterējums-dibens: 33,75%;
}
}

Es pat esmu iekļāvis orientācijas vaicājumu, lai šo rīcību vēl vairāk uzlabotu.

Mēs varam ievērot līdzīgu pieeju arī citām mūsu dizaina daļām, nomainot lielāku galvenes versiju un pārvietojot navigācijas saites uz lapas augšdaļu, tiklīdz vieta būs pieejama.

• Apskatiet mūsu atsaucīgo mājas lapu
• Apskatiet mūsu atsaucīgo multivides vienumu lapu

Un tur mums tas ir! Mēs esam izveidojuši atsaucīgu vietni - un ir pieejama diena! Nu, ne gluži. Elastīgi izkārtojumi, attēli un multivides vaicājumi ir tikai atsaucīgā projektēšanas procesa sākums.

Rīt: Šīs apmācības pēdējā daļā mēs pārsniegsim atsaucīgu tīmekļa dizainu un apskatīsim, kā mēs varam izveidot patiesi atsaucīgas vietnes.

Pols ir mijiedarbības dizainers, kas atrodas Braitonā, Anglijā. Viņš ir vislaimīgākais, izstrādājot vienkāršas, tomēr saistošas ​​saskarnes, kuru dzimtene ir tīmeklis.