Bygg et responsivt nettsted på en uke: mediespørsmål (del 4)

Innhold

• 01. Legge til mediespørsmål
• 02. Anatomi av et mediespørsmål
• 03. En ting til ...
• 04. Velge brytepunkter
• 05. Justere miniatyrbildene våre
• 06. Ikke bare bredde

• Kunnskap som trengs: Mellomliggende CSS og HTML
• Krever: Teksteditor, moderne nettleser, grafikkprogramvare
• Prosjekt Tid: 1 time (totalt 5 timer)
• Støttefil

En relativt ny del av CSS-spesifikasjonen, mediespørsmål er utvilsomt det mest spennende ved responsiv webdesign og et område som er modent for videre eksperimentering.

Etter å ha akseptert behovet for adaptive layouter, har noen sett mediespørsmål som et middel til å ettermontere adaptive layouter på eksisterende nettsteder med fast bredde. Blant de som har tatt imot responsive oppsett, har mange gjort det fra skrivebordets perspektiv, skjult innhold og funksjoner når visningsområdet smalner.

Gjennom denne opplæringen har vi tatt en alternativ, mobil først, tilnærming. Nå som vi ser ut til å inkludere mediespørsmål, kan vi tenke oss om legge til funksjoner når skjermeiendommer øker, trygt i visshet om at markeringen og designet som ligger til grunn for nettstedet vårt gir en respektabel grunnlinje.

I dag vil vi gå utover mønsterporteføljen vår og bygge de individuelle sidene som kreves for nettstedet vårt. Ved å gjøre dette vil vi se hvordan mediespørsmål er konstruert, og implementere dem på en virkelig responsiv måte.

01. Legge til mediespørsmål

Med komponentene i mønsterporteføljen vår komplette og arbeider utenfor rammen av ethvert layout, er det på tide å flytte dem til de forskjellige sidene som utgjør nettstedet vårt.

Vi begynner med hjemmesiden vår. Fra den skrivebordsorienterte designen kan vi se at i større visningsfelt skal layoutet vårt se ut som følger:

Ved å ta målinger fra vårt design, kan vi beskrive dokumentområdet i CSS som følger:

.dokument {
polstring: 0 5%;
}
.main {
bredde: 74.242424242424%; / * 784/1056 * /
flyte: venstre;
}
.komplementær {
bredde: 22,727272727273%; / * 240/1056 * /
flyte: høyre;
}

Som vi lærte i andre del av denne opplæringen, bruker vi følgende formel for å beregne prosentbredden til disse kolonnene:

(mål / kontekst) * 100 = resultat

Når vi endrer størrelsen på nettleseren vår, ser vi at skrivebordsoppsettet vårt skalerer fra den minste skjermen til den største. Selvfølgelig, i små størrelser er kolonnene for smale og linjelengdene så korte at innholdet er vanskelig å lese. Vi ønsker bare dette oppsettet når det er nok plass til at det kan fungere.

Dette er hvor mediespørsmål kommer inn. Forutsatt at dette oppsettet bare skal tre i kraft når nettleseren er bredere enn 768 piksler, kan vi legge til følgende CSS:

.dokument {
polstring: 0 5%;
}
@media-skjerm og (min bredde: 768px) {
.main {
bredde: 74.242424242424%; / * 784/1056 * /
flyte: venstre;
}
.komplementær {
bredde: 22,727272727273%; / * 240/1056 * /
flyte: høyre;
}
}

Nå, når visningsområdet er smalere enn 768 px, vil alt i mediespørsmålet bli ignorert. Det vil bli ignorert av en hvilken som helst nettleser som ikke støtter mediespørsmål.

02. Anatomi av et mediespørsmål

For å forstå hva som skjer her, la oss se på hvordan et mediespørsmål er konstruert. Vi kan dele den i to deler:

• @media skjerm: Den første delen av et mediespørsmål er Media type. Du kan gjenkjenne denne syntaksen hvis du noen gang har tatt med utskriftsstiler i CSS. Du kan også kjenne igjen navnet på navnet fra media attributt på lenke> element. Det er fordi begge aksepterer det godkjente settet av medietyper som finnes i CSS 2.1-spesifikasjonen.
• (min bredde: 768px): Den andre delen er spørsmål. Dette inkluderer trekk som skal spørres (i dette tilfellet minimum bredde på visningsområdet) og den tilsvarende verdi å teste for (768px).

Når vi snakker om responsivt webdesign, er det en tendens til å fokusere på bredde, men det er andre funksjoner vi også kan teste for:

• (min- | maks-) bredde og (min- | maks-) høyde: Disse lar oss spørre om bredden og høyden på visningsområdet (dvs. nettleservinduet).
• (min- | maks-) enhetsbredde og (min- | maks-) enhetshøyde: Disse lar oss spørre om bredden på hele skjermen. Etter min erfaring er det vanligvis mer fornuftig å basere oppsett på visningsområdet i stedet for på skjermen.
• orientering: Du kan umiddelbart tenke på mulighetene her; tenk på apper som viser forskjellig innhold basert på retningen til telefonen din - det samme er mulig på nettet.
• (min- | maks-) størrelsesforhold: Dette lar oss tilpasse oppsett basert på forholdet mellom nettleservinduet ...
• (min- | maks-) enhets-sideforhold: ... og dette gjør at vi kan gjøre det samme basert på enhetsformatet. Owen Gregory skrev en fantastisk artikkel i fjor som utforsket hvordan vi kan bruke dette spørsmålet til å knytte designene våre til enhetene de vises på.
• (min- | maks-) monokrom: Vi kan også teste om en enhet har en monokrom skjerm eller ikke. Tenk deg hvor nyttig dette ville være hvis Amazons e-ink Kindle-enheter ikke lyver og rapporterer skjermene sine som farger!

Den siste delen av spørringen vår er muligens den mest nyttige. Ved bruk av og, kan vi teste for flere funksjoner i ett spørsmål. For eksempel:

@media-skjerm og (min bredde: 768px) og (retning: liggende) {
...
}

Som du kan se, kan mediespørsmål hjelpe oss med å bygge ganske overbevisende opplevelser - og jeg har bare berørt overflaten. Hvis du leter etter litt lesning før leggetid, kan du gjøre verre enn å lese spesifikasjonen for W3C-mediespørring som beskriver alle funksjonene vi kan teste for.

03. En ting til ...

Selv om vi har tatt mediespørsmål i CSS-en vår, vil vi legge merke til at nettstedet vårt blir gjengitt som om skjermen var bredere enn 768 piksler, hvis vi ser på nettstedet vårt på en mobil enhet.

For å forstå hvorfor dette skjer, må vi ta en kort historieleksjon.

Da den opprinnelige iPhone ble kunngjort i 2007, var muligheten til å surfe på det virkelige nettet, selv om det betydde skrivebordsorienterte nettsteder med fast bredde som måtte klemmes ned for å få plass på den lille skjermen. IPhone var i stand til å gjøre dette ved å rapportere at skjermen var 980 piksler bred, før den skalerte nettsidene ned for å passe til skjermen på hele 320 piksler.

Men iPhone ble introdusert før responsiv design kom. Nå som forfattere designer nettsteder designet for mobil, er denne funksjonen mindre nyttig. Heldigvis inkluderte Apple et middel for å omgå denne oppførselen, og siden den ble adoptert av andre produsenter, har den blitt nesten en de facto standard. Det innebærer ganske enkelt å legge til en singel meta element i vår markering:

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

Dette forteller visningsprogrammerte nettlesere at et nettsted ikke skal skaleres ned, og at bredden på nettleservinduet skal behandles som den totale enhetsbredden. Når vi har lagt til denne linjen, vil nettstedet vårt vises med den tiltenkte utformingen:

04. Velge brytepunkter

La oss gå tilbake til mediespørsmålet vårt:

@media-skjerm og (min bredde: 768px) {
...
}

Verdier som et oppsett tilpasser seg blir ofte referert til som brytpunkter. Hvis du husker, i del to sa jeg at bruk av piksler er en indikasjon på ikke-responsiv tenkning, men her har jeg valgt 768px, sannsynligvis fordi det er bredden på en kjent enhet.

I stedet for å velge brytepunkter basert på egenskapene til populære enheter, kan det være mer effektivt å se på verdier hentet fra innholdet vårt, for eksempel komfortable linjelengder for lesing eller maksimal størrelse på et bilde.

Ettersom vår type blir dimensjonert ved hjelp av ems, virker det fornuftig for våre mediespørsmål å bruke ems også. Faktisk har dette en ekstra fordel. Når en bruker endrer størrelsen på teksten i nettleseren, vil sidene tilpasse seg for å bruke mindre brytpunkter. Ikke bare vil nettstedet vårt tilpasse seg ut fra størrelsen på visningsområdet, men også størrelsen på skriften. Faktisk var det først da jeg så Jeremy Keith demonstrere em-baserte mediespørsmål, at jeg skjønte hvor kraftige de kunne være.

Selv om designet vårt kan gi noen indikasjoner på mulige bruddpunkter, er den beste måten å velge dem ofte på grunn av eksperimentering. Ved å justere bredden på nettleservinduet, har jeg bestemt at 800px er en god bredde for å bytte til et mer komplekst oppsett.

Hvordan uttrykker vi 800px i ems skjønt? Igjen kan vi bruke formelen vår, men hva er sammenhengen? Når du beregner ems for mediespørsmål, er konteksten alltid nettleserens standard skriftstørrelse uansett om denne verdien har blitt overstyrt i CSS-en. Denne standardverdien er vanligvis 16 px, noe som gir oss:

800 / 16 = 50

Vi kan nå oppdatere mediespørringen vår slik:

@media-skjerm og (min bredde: 50 em) {/ * 800px * /
...
}

05. Justere miniatyrbildene våre

Du vil huske at i del 2 stilte vi miniatyrbildene våre for å være lydhøre. Når bildene i disse miniatyrbildene når full bredde, vises det imidlertid et område med hvitt mellomrom til høyre for hvert bilde. Igjen, mediespørsmål tillater oss å fikse dette.

Her er vår originale CSS:

ol.media li.media-item {
bakgrunnsfarge: #fff;
margin: 0 4.16666666667% 4.16666666667% 0;
bredde: 47.91666666667%;
flyte: venstre;
}
ol.media li.media-item: nth-child (2n) {
margin-høyre: 0;
}

Punktet der dette hvite rommet vises, er akkurat når nettleseren vokser bredere enn 560 piksler.Vi velger denne verdien vi skal bytte til og viser tre miniatyrbilder per rad. Vi kan gjøre det ved å legge til følgende CSS:

@media-skjerm og (min bredde: 35 em) {
.media-element {
bredde: 30.612244897959%; / * 240/784 * /
margin: 0 4.081632653061% 1.1429em 0; / * 0 32/784 16px 0 * /
}
.media-item: nth-child (3n) {
margin-høyre: 0;
}
}

Merk at vi ikke trenger å skrive om alle stilene som kreves for miniatyrbildet i dette mediespørsmålet, bare delene vi ønsker å tilpasse.

Når du ser på denne endringen i nettleseren, vil du merke at det ikke er noen marg til høyre for hvert andre miniatyrbilde. Dette er fordi følgende CSS-regel fortsatt er aktiv:

ol.media li.media-item: nth-child (2n) {
margin-høyre: 0;
}

Vi må endre CSS i mediespørringen for å tilbakestille den verdien:

@media-skjerm og (min bredde: 35 em) {
.media-element {
bredde: 30.612244897959%; / * 240/784 * /
margin: 0 4.081632653061% 1.1429em 0; / * 0 32/784 16px 0 * /
}
.media-item: nth-child (2n) {
margin-høyre: 4,081632653061%;
}
.media-item: nth-child (3n) {
margin-høyre: 0;
}
}

Når du oppretter mediespørsmål, må du alltid være oppmerksom på arvsproblemer som dette.

06. Ikke bare bredde

Det er viktig å tenke på mediespørsmål, ikke bare når det gjelder bredde, men også andre variabler. For eksempel er videoen på vår medieside side delvis skjult når visningshøyden synker. Vi har teknologien:

.media-objekt-innpakning {
polstring-bunn: 56,25%;
bredde: 100%;
høyde: 0;
posisjon: relativ;
}
@media-skjerm og (maks-høyde: 35 em) og (retning: liggende) {/ * 560px * /
.media-objekt-innpakning {
bredde: 60%;
polstring-bunn: 33,75%;
}
}

Jeg har til og med tatt med et orienteringsspørsmål for å finessere denne oppførselen videre.

Vi kan følge en lignende tilnærming for de andre delene av designet vårt, bytte inn en større versjon av toppteksten og flytte navigasjonskoblingene til toppen av siden når det blir ledig plass.

• Se vår responsive hjemmeside
• Se vår responsive medievare side

Og der har vi det! Vi har bygget et responsivt nettsted - og med en dag til overs! Vel, ikke helt. Fleksible oppsett, bilder og mediespørsmål er bare starten på den responsive designprosessen.

I morgen: I den siste delen av denne opplæringen vil vi gå utover responsiv webdesign, og se på hvordan vi kan bygge virkelig responsive nettsteder.

Paul er en interaksjonsdesigner basert i Brighton, England. Han er lykkeligst når han lager enkle, men engasjerende grensesnitt som er hjemmehørende på nettet.