Conţinut
- 01. Adăugarea de interogări media
- 02. Anatomia unei interogări media
- 03. Încă un lucru ...
- 04. Alegerea punctelor de întrerupere
- 05. Reglarea miniaturilor noastre
- 06. Nu doar lățimea
- Cunoștințe necesare: CSS intermediar și HTML
- Necesită: Editor de text, browser modern, software grafic
- Timpul proiectului: 1 oră (5 ore în total)
- Fișier de asistență
O parte relativ nouă a specificației CSS, interogările media sunt, fără îndoială, cel mai interesant aspect al designului web receptiv și o zonă pregătită pentru experimentări ulterioare.
După ce au acceptat nevoia de layout-uri adaptive, unii au văzut interogările media ca un mijloc de modernizare a layout-urilor adaptive pe site-urile existente cu lățime fixă. Printre cei care au îmbrățișat aspectele receptive, mulți au făcut acest lucru din perspectiva desktopului, ascunzând conținut și caracteristici pe măsură ce ecranul se restrânge.
De-a lungul acestui tutorial, am adoptat o abordare alternativă, mai întâi mobilă. Acum, în timp ce căutăm să includem interogări media, ne putem gândi adăugând funcționalități pe măsură ce ecranul crește proprietățile imobiliare, în condiții de siguranță, știind că marcajul și designul care stau la baza site-ului nostru oferă o linie de bază respectabilă.
Astăzi, vom trece dincolo de portofoliul nostru de modele și vom construi paginile individuale necesare pentru site-ul nostru. Procedând astfel, vom vedea cum sunt construite interogările media și le vom implementa într-un mod cu adevărat receptiv.
01. Adăugarea de interogări media
Cu componentele din portofoliul nostru de modele complete și care funcționează în afara limitelor oricărui aspect, este timpul să le mutăm în diferitele pagini care alcătuiesc site-ul nostru.
Vom începe cu pagina noastră de pornire. Din designul orientat spre desktop, putem vedea că în ferestrele mai largi aspectul nostru ar trebui să apară după cum urmează:
Luând măsurători din proiectarea noastră, putem descrie aria documentului în CSS după cum urmează:
.document {
umplutură: 0 5%;
}
.principal {
lățime: 74,242424242424%; / * 784/1056 * /
plutește la stânga;
}
.complementary {
lățime: 22,727272727273%; / * 240/1056 * /
plutitor: dreapta;
}
După cum am aflat în a doua parte a acestui tutorial, folosim următoarea formulă pentru a calcula lățimea procentuală a acestor coloane:
(țintă / context) * 100 = rezultat
Când ne redimensionăm browserul, vom vedea că aspectul desktop-ului nostru variază de la cel mai mic ecran la cel mai mare. Desigur, la dimensiuni mici, coloanele sunt prea înguste și lungimile liniei sunt atât de scurte încât conținutul este greu de citit. Vrem acest aspect doar atunci când există suficient spațiu disponibil pentru ca acesta să funcționeze.
Aici intervin interogările media. Presupunând că acest aspect ar trebui să intre în vigoare numai atunci când browserul este mai lat de 768px, putem adăuga următoarele CSS:
.document {
umplutură: 0 5%;
}
@media ecran și (min-lățime: 768px) {
.principal {
lățime: 74,242424242424%; / * 784/1056 * /
plutește la stânga;
}
.complementary {
lățime: 22,727272727273%; / * 240/1056 * /
plutitor: dreapta;
}
}
Acum, când fereastra de vizualizare este mai îngustă decât 768 pixeli, tot ceea ce se află în interogarea media va fi ignorat. Acesta va fi ignorat de orice browser care nu acceptă și interogările media.
02. Anatomia unei interogări media
Pentru a înțelege ce se întâmplă aici, să analizăm modul în care este construită o interogare media. Îl putem împărți în două părți:
- @media ecran: Prima parte a unei interogări media este tip media. Puteți recunoaște această sintaxă dacă ați inclus vreodată stiluri de imprimare în CSS. Puteți recunoaște, de asemenea, numele tipului din mass-media atribut pe link> element. Acest lucru se datorează faptului că ambele acceptă setul aprobat de tipuri de suporturi care se găsesc în specificația CSS 2.1.
- (lățime min .: 768 px): A doua parte este interogare. Aceasta include caracteristică pentru a fi interogat (în acest caz lățimea minimă a ferestrei) și corespunzător valoare pentru a testa pentru (768px).
Când vorbim despre designul web receptiv, există tendința de a ne concentra pe lățime, dar există și alte caracteristici pe care le putem testa și:
- (min- | max-) lățime și (min- | max-) înălțime: Acestea ne permit să interogăm lățimea și înălțimea ferestrei (de exemplu, fereastra browserului).
- (min- | max-) lățimea dispozitivului și (min- | max-) înălțimea dispozitivului: Acestea ne permit să interogăm lățimea întregului ecran. Din experiența mea, este de obicei mai sensibil să se bazeze aspectele pe fereastra de vizualizare, mai degrabă decât pe afișaj.
- orientare: Vă puteți gândi imediat la posibilitățile de aici; gândiți-vă la aplicații care prezintă conținut diferit pe baza orientării telefonului dvs. - același lucru este posibil și pe web.
- (min- | max-) raport de aspect: Acest lucru ne permite să adaptăm aspectele pe baza raportului ferestrei browserului ...
- (min- | max-) raport-aspect dispozitiv: … Și acest lucru ne permite să facem același lucru pe baza raportului de aspect al dispozitivului. Owen Gregory a scris anul trecut un articol minunat care a explorat modul în care putem folosi această interogare pentru a lega desenele noastre de dispozitivele pe care apar.
- (min- | max-) monocrom: De asemenea, putem testa dacă un dispozitiv are sau nu un afișaj monocrom. Imaginați-vă cât de util ar fi acest lucru dacă dispozitivele Kindle Amazon cu cerneală electronică nu ar minți și ar raporta ecranele lor ca culori!
Ultima parte a interogării noastre este probabil cea mai utilă. Prin utilizarea și, putem testa mai multe caracteristici într-o singură interogare. De exemplu:
@media ecran și (min-lățime: 768px) și (orientare: peisaj) {
...
}
După cum puteți vedea, interogările media ne pot ajuta să construim experiențe destul de convingătoare - și am atins doar suprafața. Dacă sunteți în căutarea unei lecturi ușoare la culcare, ați putea face mai rău decât să citiți specificațiile de interogare W3C media care descriu toate caracteristicile pentru care putem testa.
03. Încă un lucru ...
Chiar dacă am inclus întrebări media în CSS, dacă vizualizăm site-ul nostru pe un dispozitiv mobil, veți observa că site-ul nostru este în continuare redat ca și cum afișajul ar fi mai lat de 768 px.
Pentru a înțelege de ce se întâmplă acest lucru, trebuie să luăm o scurtă lecție de istorie.
Când a fost anunțat iPhone-ul original în 2007, unul dintre marile sale puncte de vânzare a fost abilitatea de a naviga pe „web-ul real”, chiar dacă asta însemna site-uri orientate pe desktop cu lățime fixă, care trebuiau strânse pentru a se potrivi pe micul său ecran. IPhone-ul a reușit să facă acest lucru raportând că ecranul său are o lățime de 980 px, înainte de a reduce paginile web pentru a se potrivi cu ecranul său de 320 px.
Dar iPhone-ul a fost introdus înainte de apariția unui design receptiv. Acum că autorii proiectează site-uri concepute pentru mobil, această caracteristică este mai puțin utilă. Din fericire, Apple a inclus un mijloc de a ocoli acest comportament și, de când a fost adoptat de alte producători, a devenit aproape un de facto standard. Pur și simplu implică adăugarea unui singur meta element pentru marcajul nostru:
meta name = "viewport" content = "initial-scale = 1.0, width = device-width" />
Acest lucru le spune browserelor care consideră că nu trebuie redus un site web și că lățimea ferestrei browserului trebuie tratată la fel ca lățimea totală a dispozitivului. După ce am adăugat această linie, site-ul nostru web va apărea cu aspectul dorit:
04. Alegerea punctelor de întrerupere
Să ne întoarcem la interogarea noastră media:
@media ecran și (min-lățime: 768px) {
...
}
Valorile la care se adaptează un aspect sunt denumite în mod obișnuit puncte de întrerupere. Dacă vă amintiți, în partea a doua am spus că utilizarea pixelilor este un indiciu al gândirii care nu răspunde, totuși aici am ales 768px, probabil pentru că este lățimea unui dispozitiv familiar.
În loc să alegeți punctele de întrerupere pe baza caracteristicilor dispozitivelor populare, poate fi mai eficient să privim valorile derivate din conținutul nostru, de exemplu, lungimi de linie confortabile pentru citire sau dimensiunea maximă a unei imagini.
Întrucât tipul nostru este dimensionat folosind ems, pare rezonabil ca și interogările noastre media să folosească și ems. De fapt, acest lucru are un beneficiu suplimentar. Când un utilizator redimensionează textul din browser, paginile se vor adapta pentru a utiliza puncte de întrerupere mai mici. Site-ul nostru web se va adapta nu numai în funcție de dimensiunea ferestrei, ci și de dimensiunea fontului. De fapt, abia când l-am văzut pe Jeremy Keith demonstrând întrebări media bazate pe em, mi-am dat seama cât de puternici ar putea fi.
Deși designul nostru poate oferi unele indicații ale posibilelor puncte de întrerupere, deseori cel mai bun mod de a le alege este prin experimentare. Prin ajustarea lățimii ferestrei browserului, am decis că 800px este o lățime bună pentru a trece la un aspect mai complex.
Cum exprimăm 800px în ems, totuși? Din nou, putem folosi formula noastră, dar care este contextul? Când calculați ems pentru interogări media, contextul este întotdeauna dimensiunea de font implicită a browserului indiferent dacă această valoare a fost suprascrisă în CSS. Această valoare implicită este de obicei 16 px, ceea ce ne oferă:
800 / 16 = 50
Acum putem actualiza interogarea noastră media astfel:
@media ecran și (min-lățime: 50em) {/ * 800px * /
...
}
05. Reglarea miniaturilor noastre
Vă veți aminti că în partea 2 ne-am proiectat miniaturile pentru a fi receptive. Cu toate acestea, odată ce imaginile din aceste miniaturi ating lățimea maximă, o zonă de spațiu alb apare în dreapta fiecărei imagini. Din nou, interogările media ne permit să remediem acest lucru.
Iată CSS-ul nostru original:
ol.media li.media-item {
culoare de fundal: #fff;
marja: 0 4.16666666667% 4.16666666667% 0;
lățime: 47,91666666667%;
plutește la stânga;
}
ol.media li.media-item: nth-child (2n) {
margine-dreapta: 0;
}
Punctul în care apare acest spațiu alb este exact când browserul crește mai mult decât 560px.Vom alege această valoare la care să trecem la afișarea a trei miniaturi pe rând. Putem face acest lucru adăugând următorul CSS:
@media ecran și (min-lățime: 35em) {
.media-item {
lățime: 30,612244897959%; / * 240/784 * /
marja: 0 4.081632653061% 1.1429em 0; / * 0 32/784 16px 0 * /
}
.media-item: nth-child (3n) {
margine-dreapta: 0;
}
}
Rețineți că nu trebuie să rescriem toate stilurile necesare pentru miniatură în această interogare media, ci doar părțile pe care dorim să le adaptăm.
Vizualizând această modificare în browser, veți observa că nu există nicio marjă la dreapta fiecărei a doua miniaturi. Acest lucru se datorează faptului că următoarea regulă CSS rămâne activă:
ol.media li.media-item: nth-child (2n) {
margine-dreapta: 0;
}
Trebuie să modificăm CSS în cadrul interogării noastre media pentru a reseta acea valoare:
@media ecran și (min-lățime: 35em) {
.media-item {
lățime: 30,612244897959%; / * 240/784 * /
marja: 0 4.081632653061% 1.1429em 0; / * 0 32/784 16px 0 * /
}
.media-item: nth-child (2n) {
margine-dreapta: 4,081632653061%;
}
.media-item: nth-child (3n) {
margine-dreapta: 0;
}
}
Atunci când creați interogări media, fiți întotdeauna conștienți de astfel de probleme legate de moștenire.
06. Nu doar lățimea
Este important să ne gândim la interogările media nu doar în ceea ce privește lățimea, ci și alte variabile. De exemplu, videoclipul de pe pagina noastră de articole media este parțial ascuns atunci când înălțimea ecranului scade. Avem tehnologia:
.media-object-wrapper {
fund de umplutură: 56,25%;
lățime: 100%;
înălțime: 0;
poziție: relativă;
}
@media ecran și (înălțime maximă: 35em) și (orientare: peisaj) {/ * 560px * /
.media-object-wrapper {
lățime: 60%;
fund de umplutură: 33,75%;
}
}
Am inclus chiar și o interogare de orientare pentru a rafina acest comportament în continuare.
Putem urmări o abordare similară pentru celelalte părți ale designului nostru, schimbând o versiune mai mare a antetului și mutând legăturile de navigare în partea de sus a paginii odată ce spațiul devine disponibil.
- Vizualizați pagina noastră de pornire receptivă
- Vizualizați pagina noastră cu elemente media receptive
Și iată-l! Am creat un site web receptiv - și cu o zi de rezervă! Ei bine, nu chiar. Aspectele flexibile, imaginile și interogările media sunt doar începutul procesului de proiectare receptivă.
Mâine: În partea finală a acestui tutorial, vom trece dincolo de designul web receptiv și vom analiza modul în care putem construi site-uri web cu adevărat receptive.
Paul este un designer de interacțiuni cu sediul în Brighton, Anglia. El este cel mai fericit când creează interfețe simple, dar captivante, care sunt native pentru web.
