Nilalaman
- 01. Pagdaragdag ng mga query sa media
- 02. Anatomy ng isang query sa media
- 03. Isa pa ...
- 04. Pagpili ng mga breakpoint
- 05. Pag-aayos ng aming mga thumbnail
- 06. Hindi lang lapad
- Kailangan ng kaalaman: Makitang CSS at HTML
- Kinakailangan: Text editor, modernong browser, graphics software
- Oras ng Proyekto: 1 oras (kabuuang 5 oras)
- Suporta ng file
Isang medyo bagong bahagi ng pagtutukoy ng CSS, ang mga query sa media ay walang alinlangan na ang pinaka-kapanapanabik na aspeto ng tumutugon na disenyo ng web at isang lugar na hinog para sa karagdagang pag-eksperimento.
Tinanggap ang pangangailangan para sa mga adaptive layout, ang ilan ay nakakita ng mga query sa media bilang isang paraan upang i-retrofit ang mga adaptive layout sa mga mayroon nang nakapirming lapad na mga site. Kabilang sa mga yumakap sa mga tumutugong layout, marami ang nagawa nito mula sa pananaw ng desktop, nagtatago ng nilalaman at mga tampok habang nagpapaliit ang viewport.
Sa buong tutorial na ito, kumuha kami ng isang kahalili, mobile muna, na diskarte. Ngayon, habang tinitingnan naming magsama ng mga query sa media, maaari naming maiisip pagdaragdag mga tampok tulad ng pagtaas ng real estate ng screen, ligtas sa kaalaman na ang markup at disenyo na underpinning ng aming site ay nagbibigay ng isang kagalang-galang na baseline.
Ngayon, lilipat kami nang lampas sa aming pattern portfolio at itatayo ang mga indibidwal na pahina na kinakailangan para sa aming website. Sa paggawa nito, makikita natin kung paano itinatayo ang mga query sa media, at ipapatupad ang mga ito sa isang tunay na tumutugong pamamaraan.
01. Pagdaragdag ng mga query sa media
Sa mga bahagi ng aming pattern portfolio na kumpleto at nagtatrabaho sa labas ng mga limitasyon ng anumang layout, oras na upang ilipat ang mga ito sa iba't ibang mga pahina na bumubuo sa aming site.
Magsisimula kami sa aming homepage. Mula sa disenyo na naka-orient sa desktop, maaari naming makita na sa mas malawak na viewports dapat lumitaw ang aming layout tulad ng sumusunod:
Pagkuha ng mga sukat mula sa aming disenyo, maaari naming ilarawan ang lugar ng dokumento sa CSS tulad ng sumusunod:
.documento {
padding: 0 5%;
}
.main {
lapad: 74.242424242424%; / * 784/1056 * /
lumutang pakaliwa;
}
.complementary {
lapad: 22.727272727273%; / * 240/1056 * /
lumutang: kanan;
}
Tulad ng natutunan namin sa pangalawang bahagi ng tutorial na ito, ginagamit namin ang sumusunod na pormula upang makalkula ang porsyento ng lapad ng mga haligi na ito:
(target / konteksto) * 100 = resulta
Kapag pinalitan namin ang laki ng aming browser, makikita namin na ang kaliskis ng aming layout ng desktop ay mula sa pinakamaliit na laki ng screen hanggang sa pinakamalaki. Siyempre, sa maliliit na sukat ang mga haligi ay masyadong makitid at haba ng linya nang maikli na ang nilalaman ay mahirap basahin. Gusto lang namin ang layout na ito kapag may sapat na puwang na magagamit upang gumana ito.
Dito pumapasok ang mga query ng media. Ipagpalagay na ang layout na ito ay dapat na magkabisa lamang kung ang browser ay mas malawak kaysa sa 768px, maaari naming idagdag ang sumusunod na CSS:
.documento {
padding: 0 5%;
}
@media screen at (min-width: 768px) {
.main {
lapad: 74.242424242424%; / * 784/1056 * /
lumutang pakaliwa;
}
.complementary {
lapad: 22.727272727273%; / * 240/1056 * /
lumutang: kanan;
}
}
Ngayon, kapag ang viewport ay mas makitid kaysa sa 768px, ang lahat sa loob ng query ng media ay hindi papansinin. Hindi ito papansinin ng anumang browser na hindi rin sumusuporta sa mga query sa media.
02. Anatomy ng isang query sa media
Upang maunawaan kung ano ang nangyayari dito, tingnan natin kung paano binuo ang isang query sa media. Maaari nating hatiin ito sa dalawang bahagi:
- @media screen: Ang unang bahagi ng isang query sa media ay ang uri ng media. Maaari mong makilala ang syntax na ito kung naisama mo pa ang mga naka-print na istilo sa iyong CSS. Maaari mo ring makilala ang pangalan ng uri mula sa media katangian sa link> elemento. Iyon ay dahil kapwa tinatanggap ang naaprubahang hanay ng mga uri ng media na matatagpuan sa detalye ng CSS 2.1.
- (min-lapad: 768px): Ang pangalawang bahagi ay ang tanong. Kasama rito ang tampok na mapagtanong (sa kasong ito ang minimum na lapad ng viewport) at ang kaukulang halaga upang subukan para sa (768px).
Kapag pinag-uusapan natin ang tungkol sa tumutugong disenyo ng web, may posibilidad na mag-focus sa lapad, ngunit may iba pang mga tampok na maaari rin nating subukan.
- (min- | max-) lapad at (min- | max-) taas: Pinapayagan kaming magtanong sa lapad at taas ng viewport (ibig sabihin, ang window ng browser).
- (min- | max-) lapad ng aparato at (min- | max-) taas ng aparato: Pinapayagan kaming magtanong ng lapad ng buong display. Sa aking karanasan, karaniwang mas makatuwiran na ibase ang mga layout sa viewport kaysa sa display.
- oryentasyon: Maaari mong agad na maiisip ang mga posibilidad dito; mag-isip ng mga app na nagpapakita ng iba't ibang nilalaman batay sa oryentasyon ng iyong telepono - posible ang pareho sa web.
- (min- | max-) aspeto-ratio: Pinapayagan kaming iakma ang mga layout batay sa ratio ng window ng browser…
- (min- | max-) ratio ng aspeto ng aparato: ... at pinapayagan kaming gawin ang pareho batay sa ratio ng aspeto ng aparato. Sumulat si Owen Gregory ng isang kahanga-hangang artikulo noong nakaraang taon na ginalugad kung paano namin magagamit ang query na ito upang maitali ang aming mga disenyo sa mga lalabas na kanilang lumitaw.
- (min- | max-) monochrome: Maaari din naming subukan kung ang isang aparato ay mayroong isang monochrome display o wala. Isipin kung gaano ito magiging kapaki-pakinabang kung ang e-ink Kindle device ng Amazon ay hindi nagsinungaling at iniulat ang kanilang mga screen bilang kulay!
Ang huling bahagi ng aming query ay maaaring ang pinaka-kapaki-pakinabang. Sa pamamagitan ng paggamit at, maaari nating subukan ang maraming mga tampok sa isang query. Halimbawa:
@media screen at (min-width: 768px) at (orientation: landscape) {
...
}
Tulad ng nakikita mo, ang mga query sa media ay makakatulong sa amin na bumuo ng medyo nakakahimok na mga karanasan - at nahawakan ko lang ang ibabaw. Kung naghahanap ka para sa isang magaan na pagbabasa sa oras ng pagtulog, maaari kang gumawa ng mas masahol kaysa sa basahin ang pagtutukoy ng query sa media ng W3C na naglalarawan sa lahat ng mga tampok na maaari nating subukan.
03. Isa pa ...
Kahit na isinama namin ang mga query sa media sa aming CSS, kung titingnan namin ang aming site sa isang mobile device, mapapansin mo na ang aming site ay nai-render pa rin na parang ang display ay mas malawak kaysa sa 768px.
Upang maunawaan kung bakit ito nangyayari, kailangan nating kumuha ng isang maikling aralin sa kasaysayan.
Nang ibinalita ang orihinal na iPhone noong 2007, ang isa sa malalaking puntos sa pagbebenta ay ang kakayahang mag-browse sa 'totoong web', kahit na nangangahulugan ito ng mga nakapirming lapad na mga site na oriented sa desktop na kailangang mai-squash upang magkasya sa maliit na screen nito. Nagawa ito ng iPhone sa pamamagitan ng pag-uulat ng display nito bilang 980px ang lapad, bago i-scale ang mga web page upang magkasya ang 320px-wide screen nito.
Ngunit ang iPhone ay ipinakilala bago ang pagdating ng tumutugong disenyo. Ngayon na ang mga may-akda ay nagdidisenyo ng mga site na idinisenyo para sa mobile, ang tampok na ito ay hindi gaanong kapaki-pakinabang. Sa kabutihang palad, nagsama ang Apple ng isang paraan ng pag-bypass sa pag-uugali na ito, at dahil na-ampon ito ng iba pang mga paninda, naging halos isang talaga pamantayan Nagsasangkot lamang ito ng pagdaragdag ng isang solong meta elemento sa aming markup:
pangalan ng meta = "viewport" na nilalaman = "paunang sukat = 1.0, lapad = lapad ng aparato" />
Sinasabi nito sa mga browser na may kamalayan sa viewport na ang isang website ay hindi dapat na-scale down, at ang lapad ng window ng browser ay dapat tratuhin nang pareho sa pangkalahatang lapad ng aparato. Kapag naidagdag na namin ang linyang ito, lilitaw ang aming website kasama ang inilaan na layout:
04. Pagpili ng mga breakpoint
Bumalik tayo sa aming query sa media:
@media screen at (min-width: 768px) {
...
}
Ang mga halaga kung saan ang isang layout na umaangkop ay karaniwang tinutukoy bilang mga breakpoint. Kung maaalala mo, sa bahagi ng dalawang sinabi ko na ang paggamit ng mga pixel ay isang pahiwatig ng hindi tumutugon na pag-iisip, ngunit dito pinili ko ang 768px, marahil dahil ito ang lapad ng isang pamilyar na aparato.
Sa halip na pumili ng mga breakpoint batay sa mga katangian ng mga tanyag na aparato, maaari itong maging mas epektibo upang tingnan ang mga halagang nagmula sa aming nilalaman, halimbawa, mga komportableng haba ng linya para sa pagbabasa o ang maximum na laki ng isang imahe.
Sa laki ng aming uri na gumagamit ng mga em, mukhang makatuwiran para sa aming mga query sa media na gumamit din ng mga em. Sa katunayan ang paggawa nito ay may karagdagang benepisyo. Kapag ang isang gumagamit ay nagbago ang laki ng teksto sa browser, ang mga pahina ay babagay upang magamit ang mas maliit na mga breakpoint. Hindi lamang ang aming website ang babagay batay sa laki ng viewport, ngunit ang laki din ng font. Sa katunayan, noong nakita ko lamang si Jeremy Keith na nagpakita ng mga query sa media na batay sa em na napagtanto ko kung gaano sila katindi.
Habang ang aming disenyo ay maaaring magbigay ng ilang indikasyon ng posibleng mga breakpoint, madalas ang pinakamahusay na paraan upang mapili ang mga ito ay sa pamamagitan ng pag-e-eksperimento. Sa pamamagitan ng pag-aayos ng lapad ng window ng browser, napagpasyahan kong ang 800px ay isang mahusay na lapad kung saan magpapalit sa isang mas kumplikadong layout.
Paano namin ipahayag ang 800px sa mga ems? Muli, maaari naming gamitin ang aming pormula, ngunit ano ang konteksto? Kapag kinakalkula ang mga em para sa mga query sa media, ang konteksto ay palaging default na laki ng font ng browser hindi alintana kung ang halagang ito ay na-override sa iyong CSS. Ang default na ito ay karaniwang 16px, na nagbibigay sa amin:
800 / 16 = 50
Maaari na naming i-update ang aming query sa media tulad nito:
@media screen at (min-width: 50em) {/ * 800px * /
...
}
05. Pag-aayos ng aming mga thumbnail
Matatandaan mo na sa bahagi 2 ay inayos namin ang aming mga thumbnail upang maging tumutugon. Gayunpaman sa sandaling maabot ng mga imahe sa loob ng mga thumbnail ang kanilang buong lapad, isang lugar ng puting puwang ang lilitaw sa kanan ng bawat imahe. Muli, pinapayagan kami ng mga query ng media na ayusin ito.
Narito ang aming orihinal na CSS:
ol.media li.media-item {
background-color: #fff;
margin: 0 4.16666666667% 4.16666666667% 0;
lapad: 47.91666666667%;
lumutang pakaliwa;
}
ol.media li.media-item: nth-child (2n) {
margin-kanan: 0;
}
Ang puntong lumilitaw ang puting puwang na ito ay tulad ng paglaki ng browser na mas malawak kaysa sa 560px.Pipiliin namin ang halagang ito kung saan magpapalit sa pagpapakita ng tatlong mga thumbnail bawat hilera. Maaari nating gawin iyon sa pamamagitan ng pagdaragdag ng sumusunod na CSS:
@media screen at (min-width: 35em) {
.media-item {
lapad: 30.612244897959%; / * 240/784 * /
margin: 0 4.081632653061% 1.1429em 0; / * 0 32/784 16px 0 * /
}
.media-item: nth-child (3n) {
margin-kanan: 0;
}
}
Tandaan na hindi namin kailangang muling isulat ang lahat ng mga istilong kinakailangan para sa thumbnail sa loob ng query ng media na ito, ang mga bahagi lamang na nais naming iakma.
Sa pagtingin sa pagbabagong ito sa browser, mapapansin mo na walang margin sa kanan ng bawat pangalawang thumbnail. Ito ay dahil nananatiling aktibo ang sumusunod na panuntunan sa CSS:
ol.media li.media-item: nth-child (2n) {
margin-kanan: 0;
}
Kailangan naming baguhin ang CSS sa loob ng aming query sa media upang mai-reset ang halagang iyon:
@media screen at (min-width: 35em) {
.media-item {
lapad: 30.612244897959%; / * 240/784 * /
margin: 0 4.081632653061% 1.1429em 0; / * 0 32/784 16px 0 * /
}
.media-item: nth-child (2n) {
margin-kanan: 4.081632653061%;
}
.media-item: nth-child (3n) {
margin-kanan: 0;
}
}
Kapag lumilikha ng mga query sa media, laging magkaroon ng kamalayan ng mga isyu sa pamana tulad nito.
06. Hindi lang lapad
Mahalagang mag-isip tungkol sa mga query sa media hindi lamang sa mga tuntunin ng lapad, ngunit iba pang mga variable. Halimbawa, ang video sa aming pahina ng item ng media ay bahagyang nakatago kapag bumababa ang taas ng viewport. Mayroon kaming teknolohiya:
.media-object-wrapper {
padding-ilalim: 56.25%;
lapad: 100%;
taas: 0;
posisyon: kamag-anak;
}
Ang screen ng @media at (max-taas: 35em) at (orientation: landscape) {/ * 560px * /
.media-object-wrapper {
lapad: 60%;
padding-ilalim: 33.75%;
}
}
Isinama ko pa ang isang query sa oryentasyon upang higit na mabago ang ugali na ito.
Maaari naming sundin ang isang katulad na diskarte para sa iba pang mga bahagi ng aming disenyo, pagpapalit sa isang mas malaking bersyon ng header at ilipat ang mga link sa pag-navigate sa tuktok ng pahina sa sandaling magagamit ang puwang.
- Tingnan ang aming tumutugong homepage
- Tingnan ang aming tumutugon na pahina ng item ng media
At doon namin ito! Bumuo kami ng isang tumutugong website - at may isang araw na matitira! Well, hindi masyadong. Ang mga kakayahang umangkop na layout, imahe at mga query sa media ay ang simula lamang ng proseso ng tumutugong disenyo.
Bukas: Sa huling bahagi ng tutorial na ito, malalampasan namin ang disenyo ng web na tumutugon, at titingnan kung paano kami makakagawa ng tunay na tumutugong mga website.
Si Paul ay isang taga-disenyo ng pakikipag-ugnayan na nakabase sa Brighton, England. Siya ang pinakamasaya kapag gumagawa ng mga simple ngunit nakakaengganyo na mga interface na katutubong sa web.
