Efni.
- 01. Bæta við fjölmiðlafyrirspurnum
- 02. Líffærafræði fjölmiðlafyrirspurnar
- 03. Eitt í viðbót ...
- 04. Val á brotstöðum
- 05. Að laga smámyndir okkar
- 06. Ekki bara breidd
- Þekkingar þörf: Millistig CSS og HTML
- Krefst: Textaritill, nútímalegur vafri, grafíkhugbúnaður
- Verkefnatími: 1 klukkustund (samtals 5 klukkustundir)
- Stuðningsskrá
Tiltölulega nýr hluti af CSS forskriftinni, fjölmiðlafyrirspurnir eru án efa mest spennandi þáttur í móttækilegri vefhönnun og svæði þroskað til frekari tilrauna.
Sumir hafa viðurkennt þörfina á aðlögunarskipulagi og hafa séð fjölmiðlafyrirspurnir sem leið til að endurbæta aðlögunarskipulag á núverandi vefsíður með fasta breidd. Meðal þeirra sem hafa tekið á móti móttækilegum uppsetningum hafa margir gert það frá sjónarhóli skjáborðsins, falið efni og eiginleika þegar sjónarmiðið þrengist.
Í gegnum þessa kennslu höfum við tekið aðra leið, farsíma fyrst. Nú, þegar við horfum til að fela fjölmiðlafyrirspurnir, getum við velt fyrir okkur bæta við eiginleikar þegar fasteignir á skjánum aukast, öruggt í þeirri vissu að álagningin og hönnunin sem liggur til grundvallar síðunni okkar veitir virðulega grunnlínu.
Í dag munum við fara út fyrir mynstur eigu okkar og byggja upp einstaka síður sem krafist er fyrir vefsíðu okkar. Með því munum við sjá hvernig fjölmiðlafyrirspurnir eru byggðar upp og útfæra þær á sannarlega móttækilegan hátt.
01. Bæta við fjölmiðlafyrirspurnum
Þar sem íhlutirnir í mynstri safninu okkar eru fullkomnir og vinna utan ramma hvers skipulags, er kominn tími til að flytja þá inn á mismunandi síður sem mynda síðuna okkar.
Við byrjum á heimasíðunni okkar. Frá skjáborðsmiðaðri hönnun getum við séð að í breiðari útsýnisþröngum ætti skipulag okkar að birtast sem hér segir:
Með því að taka mælingar frá hönnun okkar getum við lýst skjalasvæðinu í CSS á eftirfarandi hátt:
.document {
bólstrun: 0 5%;
}
.aðal {
breidd: 74,242424242424%; / * 784/1056 * /
fljóta: vinstri;
}
. viðbótar {
breidd: 22.727272727273%; / * 240/1056 * /
fljóta: rétt;
}
Eins og við lærðum í seinni hluta þessarar kennslu, notum við eftirfarandi formúlu til að reikna út prósentubreidd þessara dálka:
(mark / samhengi) * 100 = niðurstaða
Þegar við breytum stærð vafrans munum við sjá að skjáborðsútlitið okkar skalast frá minnsta stærð til stærsta. Auðvitað, í litlum stærðum eru dálkarnir of mjóir og línulengdir svo stuttar að innihaldið er erfitt að lesa. Við viljum aðeins hafa þetta skipulag þegar það er nóg pláss til að það geti unnið.
Þetta er þar sem fjölmiðlafyrirspurnir berast. Miðað við að þetta skipulag eigi aðeins að taka gildi þegar vafrinn er breiðari en 768px, getum við bætt við eftirfarandi CSS:
.document {
bólstrun: 0 5%;
}
@media skjár og (mín breidd: 768px) {
.aðal {
breidd: 74,242424242424%; / * 784/1056 * /
fljóta: vinstri;
}
. viðbótar {
breidd: 22.727272727273%; / * 240/1056 * /
fljóta: rétt;
}
}
Nú, þegar útsýnisskottið er þrengra en 768px, verður allt sem er í fjölmiðlafyrirspurninni hunsað. Það verður hunsað af hverjum vafra sem styður ekki fjölmiðlafyrirspurnir líka.
02. Líffærafræði fjölmiðlafyrirspurnar
Til að skilja hvað er að gerast hér skulum við skoða hvernig fjölmiðlafyrirspurn er byggð upp. Við getum skipt því í tvo hluta:
- @ media skjár: Fyrsti hluti fjölmiðlafyrirspurnar er fjölmiðlategund. Þú gætir kannast við þessa setningafræði ef þú hefur einhvern tíma sett prentstíl í CSS. Þú gætir einnig þekkt tegundarheitið úr fjölmiðlum eiginleiki á hlekkur> frumefni. Það er vegna þess að báðir samþykkja samþykktan fjölda fjölmiðlategunda sem finnast í CSS 2.1 forskriftinni.
- (mín breidd: 768px): Seinni hlutinn er fyrirspurn. Þetta felur í sér lögun að vera fyrirspurnir (í þessu tilfelli lágmarksbreidd útsýnisskipsins) og samsvarandi gildi til að prófa fyrir (768px).
Þegar við tölum um móttækilega vefhönnun er tilhneiging til að einbeita sér að breidd en það eru aðrir eiginleikar sem við getum prófað líka:
- (mín- | hámarks-) breidd og (mín- | hámarks-) hæð: Þetta gerir okkur kleift að spyrjast fyrir um breidd og hæð útsýnisins (þ.e. vafragluggann).
- (mín- | hámarks-) tækjabreidd og (mín- | hámarks-) tækishæð: Þetta gerir okkur kleift að spyrja um breidd alls skjásins. Samkvæmt minni reynslu er venjulega skynsamlegra að byggja skipulag á útsýnisstað frekar en skjánum.
- stefnumörkun: Þú getur strax hugsað um möguleikana hér; hugsaðu um forrit sem sýna mismunandi efni byggt á stefnumörkun símans - það sama er mögulegt á vefnum.
- (min- | max-) hlutföll: Þetta gerir okkur kleift að laga útliti byggt á hlutfalli vafragluggans ...
- (mín- | hámarks-) hlutfall hlutfalls tækis: ... og þetta gerir okkur kleift að gera það sama miðað við stærðarhlutfall tækisins. Owen Gregory skrifaði frábæra grein í fyrra sem kannaði hvernig við getum notað þessa fyrirspurn til að binda hönnun okkar við tækin sem þau birtast á.
- (mín- | hámark-) einlita: Við getum líka prófað hvort tæki sé með einlita skjá eða ekki. Hugsaðu þér hversu gagnlegt þetta væri ef Kindle tæki Amazon frá e-bleki ljúgu ekki og tilkynntu skjáina sem lit!
Lokahluti fyrirspurnar okkar er mögulega gagnlegastur. Með því að nota og, við getum prófað hvort margir eiginleikar séu í einni fyrirspurn. Til dæmis:
@media skjár og (mín breidd: 768px) og (stefnumörkun: landslag) {
...
}
Eins og þú sérð geta fyrirspurnir frá fjölmiðlum hjálpað okkur að byggja upp nokkuð sannfærandi reynslu - og ég hef aðeins snert yfirborðið. Ef þú ert að leita að léttum lestri fyrir svefn, gætirðu gert verra en að lesa forskrift W3C fyrirspurna fjölmiðla sem lýsir öllum þeim eiginleikum sem við getum prófað fyrir.
03. Eitt í viðbót ...
Jafnvel þó að við höfum látið fjölmiðlafyrirspurnir fylgja með í CSS okkar, ef við skoðum síðuna okkar í fartæki, munuð þið taka eftir því að síða okkar er ennþá gefin út eins og skjárinn væri breiðari en 768px.
Til að skilja hvers vegna þetta gerist verðum við að taka stutta sögukennslu.
Þegar tilkynntur var um upprunalega iPhone árið 2007 var einn af stóru sölupunktunum hæfileikinn til að vafra á ‘alvöru vefnum’, jafnvel þó að það þýddi fastar breiddar skrifborðsmiðaðar síður sem þurfti að hylja niður til að passa á litla skjáinn. IPhone gat gert þetta með því að tilkynna að skjárinn væri 980px breiður, áður en vefsíður voru færðar niður til að passa 320px breiðan skjáinn.
En iPhone var kynntur fyrir tilkomu móttækilegrar hönnunar. Nú þegar höfundar eru að hanna síður sem eru hannaðar fyrir farsíma er þessi aðgerð ekki eins gagnlegur. Sem betur fer innihélt Apple leið til að fara framhjá þessari hegðun og þar sem það hefur verið samþykkt af öðrum framleiðendum hefur það orðið næstum því reynd staðall. Það felur einfaldlega í sér að bæta við smáskífu meta þáttur í álagningu okkar:
meta name = "viewport" content = "initial-scale = 1.0, width = device-width" />
Þetta segir vafra sem eru meðvitaðir um skoðunaraðila að ekki ætti að minnka vefsíðu og að meðhöndla ætti breidd vafragluggans eins og heildarbreidd tækisins. Þegar við höfum bætt við þessari línu mun vefsíðan okkar birtast með fyrirhuguðu skipulagi:
04. Val á brotstöðum
Förum aftur að fjölmiðlafyrirspurn okkar:
@media skjár og (mín breidd: 768px) {
...
}
Gildi sem skipulag lagar sig að er oftast kölluð brotpunktar. Ef þú manst, í 2. hluta sagði ég að notkun pixla væri vísbending um hugsun sem svaraði ekki, en hér hef ég valið 768px, líklega vegna þess að það er breidd þekkts tækis.
Í stað þess að velja brotpunkta út frá eiginleikum vinsælra tækja getur verið árangursríkara að skoða gildi sem eru fengin úr innihaldi okkar, til dæmis þægilegar línulengdir við lestur eða hámarksstærð myndar.
Þar sem gerð okkar er í stærð með því að nota ems virðist skynsamlegt fyrir fjölmiðlafyrirspurnir okkar að nota ems líka. Reyndar hefur það viðbótarávinning. Þegar notandi hefur breytt stærð á texta í vafranum, aðlagast síður til að nota minni brotpunkta. Ekki aðeins mun vefsíðan okkar aðlagast miðað við stærð útsýnisins, heldur stærð letursins líka. Reyndar var það aðeins þegar ég sá Jeremy Keith sýna fram á em-based fjölmiðlafyrirspurnir að ég áttaði mig á því hversu öflug þau gætu verið.
Þó að hönnunin okkar geti gefið vísbendingar um hugsanleg brot, þá er besta leiðin til að velja þau með tilraunum. Með því að stilla breidd vafragluggans hef ég ákveðið að 800 pixlar eru góð breidd til að skipta yfir í flóknara skipulag.
Hvernig tjáum við 800px þó í ems? Aftur getum við notað formúluna okkar, en hvert er samhengið? Við útreikning á ems fyrir fjölmiðlafyrirspurnir er samhengið alltaf sjálfgefin leturstærð vafrans án tillits til þess hvort þessu gildi hefur verið hnekkt í CSS. Þessi vanræksla er venjulega 16 pixlar, sem gefur okkur:
800 / 16 = 50
Við getum nú uppfært fjölmiðlafyrirspurnina okkar þannig:
@media skjár og (mín breidd: 50em) {/ * 800px * /
...
}
05. Að laga smámyndir okkar
Þú munt muna að í 2. hluta gerðum við smámyndirnar okkar til að vera móttækilegar. En þegar myndirnar í þessum smámyndum ná fullri breidd birtist svæði með hvítu rými til hægri við hverja mynd. Aftur leyfa fjölmiðlafyrirspurnir okkur að laga þetta.
Hér er upprunalega CSS okkar:
ol.media li.media-item {
bakgrunnslitur: #fff;
framlegð: 0 4.16666666667% 4.16666666667% 0;
breidd: 47,91666666667%;
fljóta: vinstri;
}
ol.media li.media-item: nth-child (2n) {
spássíu-hægri: 0;
}
Punkturinn þar sem þetta hvíta bil birtist er rétt eins og vafrinn stækkar en 560 pixlar.Við munum velja þetta gildi sem við eigum að skipta um til að sýna þrjár smámyndir í hverri röð. Við getum gert það með því að bæta við eftirfarandi CSS:
@ media skjár og (mín breidd: 35em) {
.media-item {
breidd: 30.612244897959%; / * 240/784 * /
framlegð: 0 4.081632653061% 1.1429em 0; / * 0 32/784 16px 0 * /
}
.media-item: nth-child (3n) {
spássíu-hægri: 0;
}
}
Athugaðu að við þurfum ekki að endurskrifa alla stíla sem krafist er fyrir smámyndina í þessari fjölmiðlafyrirspurn, heldur aðeins hlutana sem við viljum aðlaga.
Þegar þú skoðar þessa breytingu í vafranum verður þú að athuga að það er engin spássía til hægri við aðra hverja smámynd. Þetta er vegna þess að eftirfarandi CSS regla er enn virk:
ol.media li.media-item: nth-child (2n) {
spássíu-hægri: 0;
}
Við þurfum að breyta CSS innan fjölmiðlafyrirspurnar okkar til að endurstilla það gildi:
@ media skjár og (mín breidd: 35em) {
.media-item {
breidd: 30.612244897959%; / * 240/784 * /
framlegð: 0 4.081632653061% 1.1429em 0; / * 0 32/784 16px 0 * /
}
.media-item: nth-child (2n) {
framlegð til hægri: 4,081632653061%;
}
.media-item: nth-child (3n) {
spássíu-hægri: 0;
}
}
Þegar þú býrð til fjölmiðlafyrirspurnir skaltu alltaf vera meðvitaður um erfðamál eins og þetta.
06. Ekki bara breidd
Það er mikilvægt að hugsa um fyrirspurnir í fjölmiðlum, ekki bara hvað varðar breidd heldur einnig aðrar breytur. Til dæmis er myndbandið á fjölmiðlasíðu okkar að hluta til falið þegar útsýnishæðin minnkar. Við höfum tæknina:
.media-object-umbúðir {
padding-botn: 56,25%;
breidd: 100%;
hæð: 0;
staða: ættingi;
}
@ media skjár og (hámarkshæð: 35em) og (stefnumörkun: landslag) {/ * 560px * /
.media-object-umbúðir {
breidd: 60%;
padding-botn: 33,75%;
}
}
Ég hef meira að segja látið fylgja stefnumótunarfyrirspurn til að fínstilla þessa hegðun frekar.
Við getum fylgt svipaða nálgun fyrir aðra hluta hönnunar okkar, skipt í stærri útgáfu af hausnum og fært leiðsöguhlekkina efst á síðunni þegar pláss verður laus.
- Skoðaðu móttækilegu heimasíðuna okkar
- Skoðaðu móttækilegu fjölmiðlasíðuna okkar
Og þar höfum við það! Við höfum byggt móttækilega vefsíðu - og með einn dag til vara! Jæja, ekki alveg. Sveigjanlegar uppsetningar, myndir og fjölmiðlafyrirspurnir eru aðeins byrjunin á svöruðu hönnunarferlinu.
Á morgun: Í lokahluta þessarar kennslu munum við fara út fyrir móttækilega vefsíðuhönnun og skoða hvernig við getum byggt upp sannarlega móttækilegar vefsíður.
Paul er samskiptahönnuður með aðsetur í Brighton á Englandi. Hann er ánægðastur þegar hann er að búa til einföld en grípandi tengi sem eru innfæddir á vefnum.
