Rakenna reagoiva sivusto viikossa: mediakyselyt (osa 4)

Sisältö

• 01. Mediakyselyjen lisääminen
• 02. Mediakyselyn anatomia
• 03. Vielä yksi asia…
• 04. Katkaisupisteiden valinta
• 05. Pikkukuvien säätäminen
• 06. Ei vain leveys

• Tarvittava tieto: Keskitason CSS ja HTML
• Edellyttää: Tekstieditori, moderni selain, grafiikkaohjelmisto
• Projektin aika: 1 tunti (yhteensä 5 tuntia)
• Tukitiedosto

Suhteellisen uusi osa CSS-määrittelyä, mediakyselyt ovat epäilemättä mielenkiintoisin osa reagoivaa web-suunnittelua ja alue, joka on kypsä jatkokokeille.

Jotkut ovat hyväksyneet adaptiivisten asettelujen tarpeen, joidenkin mielestä mediakyselyt ovat keino sovittaa adaptiiviset asettelut nykyisiin kiinteän leveyden sivustoihin. Niiden joukossa, jotka ovat omaksuneet reagoivat asettelut, monet ovat tehneet niin työpöydän näkökulmasta piilottamalla sisältöä ja ominaisuuksia näkymän kaventuessa.

Tässä opetusohjelmassa olemme käyttäneet vaihtoehtoista, ensin mobiilia. Nyt kun haluamme sisällyttää mediakyselyjä, voimme miettiä lisäämällä ominaisuuksia, kun näytön kiinteistö kasvaa, turvallista tietäen, että sivustollemme perustuvat merkinnät ja suunnittelu tarjoavat kunnioitettavan lähtötason.

Tänään siirrymme mallivalikoimamme ulkopuolelle ja rakennamme verkkosivustollemme tarvittavat yksittäiset sivut. Tällöin näemme, miten mediakyselyt rakennetaan, ja toteutamme ne todella reagoivalla tavalla.

01. Mediakyselyjen lisääminen

Kun malliportfolion komponentit ovat täydelliset ja toimivat minkä tahansa asettelun rajojen ulkopuolella, on aika siirtää ne sivustomme eri sivuille.

Aloitamme kotisivultamme. Työpöydälle suunnatusta ulkoasusta voimme nähdä, että laajemmissa näkymissä ulkoasun tulisi näkyä seuraavasti:

Mittausten perusteella voimme kuvata CSS: n asiakirja-aluetta seuraavasti:

.dokumentti {
pehmuste: 0 5%;
}
.main {
leveys: 74,242424242424%; / * 784/1056 * /
kellua: vasen;
}
.complementary {
leveys: 22,727272727273%; / * 240/1056 * /
kellua: oikea;
}

Kuten opimme tämän opetusohjelman toisessa osassa, laskemme näiden sarakkeiden prosenttileveyden seuraavan kaavan avulla:

(kohde / konteksti) * 100 = tulos

Kun muutamme selaimesi kokoa, näemme, että työpöydän asettelu skaalautuu pienimmän koon näytöstä suurimpaan. Pienissä kooissa tietysti sarakkeet ovat liian kapeita ja viivojen pituudet niin lyhyitä, että sisältöä on vaikea lukea. Haluamme tämän asettelun vain, kun siinä on tarpeeksi tilaa toimiakseen.

Täältä tulevat mediakyselyt. Olettaen, että tämän asettelun tulisi tulla voimaan vain, kun selain on leveämpi kuin 768 kuvapistettä, voimme lisätä seuraavan CSS: n:

.dokumentti {
pehmuste: 0 5%;
}
@media -näyttö ja (min-leveys: 768px) {
.main {
leveys: 74,242424242424%; / * 784/1056 * /
kellua: vasen;
}
.complementary {
leveys: 22,727272727273%; / * 240/1056 * /
kellua: oikea;
}
}

Nyt, kun näkymä on kapeampi kuin 768 kuvapistettä, kaikki mediakyselyn sisällä jätetään huomioimatta. Kaikki selaimet, jotka eivät tue mediakyselyjä, ohittavat sen.

02. Mediakyselyn anatomia

Jos haluat ymmärtää, mitä täällä tapahtuu, katsotaan miten mediakysely rakennetaan. Voimme jakaa sen kahteen osaan:

• @media -näyttö: Mediakyselyn ensimmäinen osa on mediatyyppi. Saatat tunnistaa tämän syntaksin, jos olet joskus sisällyttänyt tulostustyylit CSS: ään. Tunnistat tyypin nimen myös media attribuutti linkki> elementti. Tämä johtuu siitä, että molemmat hyväksyvät CSS 2.1 -määrityksessä olevat hyväksytyt mediatyypit.
• (min-leveys: 768px): Toinen osa on kysely. Tähän sisältyy ominaisuus kysytään (tässä tapauksessa näkymän vähimmäisleveys) ja vastaava arvo testata (768 kuvapistettä).

Kun puhumme reagoivasta verkkosuunnittelusta, on taipumus keskittyä leveydelle, mutta on myös muita ominaisuuksia, joita voimme testata:

• (min- | max-) leveys ja (min- | max-) korkeus: Niiden avulla voimme kysyä näkymän leveyttä ja korkeutta (ts. Selainikkunaa).
• (min- | max-) laitteen leveys ja (min- | max-) laitteen korkeus: Näiden avulla voimme kysyä koko näytön leveyttä. Kokemukseni mukaan on yleensä järkevämpää sijoittaa asettelut näkymään kuin näyttöön.
• suuntautuminen: Voit heti miettiä mahdollisuuksia täällä; ajattele sovelluksia, jotka näyttävät eri sisältöä puhelimesi suunnan perusteella - sama on mahdollista verkossa.
• (min- | max-) kuvasuhde: Tämän avulla voimme mukauttaa asetteluja selainikkunan suhteen perusteella ...
• (min- | max-) laitteen kuvasuhde: … Ja tämän avulla voimme tehdä saman laitteen kuvasuhteen perusteella. Owen Gregory kirjoitti viime vuonna upean artikkelin, jossa selvitettiin, kuinka voimme käyttää tätä kyselyä sitomaan suunnitelmamme laitteisiin, joissa ne esiintyvät.
• (min- | max-) yksivärinen: Voimme myös testata, onko laitteessa yksivärinen näyttö vai ei. Kuvittele, kuinka hyödyllistä tämä olisi, jos Amazonin e-ink-Kindle-laitteet eivät valehtele ja ilmoittavat näytöistään väreinä!

Kyselyn viimeinen osa on mahdollisesti hyödyllisin. Käyttämällä ja, voimme testata useita ominaisuuksia yhdellä kyselyllä. Esimerkiksi:

@media -näyttö ja (min-leveys: 768px) ja (suunta: vaaka) {
...
}

Kuten näette, mediakyselyt voivat auttaa meitä rakentamaan melko vakuuttavia kokemuksia - ja olen vain koskettanut pintaa. Jos etsit kevyttä lukemista nukkumaan mennessä, voit tehdä huonommin kuin lukea W3C-mediakyselymäärityksen, joka kuvaa kaikki ominaisuudet, joita voimme testata.

03. Vielä yksi asia…

Vaikka olemme sisällyttäneet mediakyselyt CSS: ään, jos katsomme sivustoamme mobiililaitteella, huomaat, että sivustoamme renderoidaan edelleen ikään kuin näyttö olisi leveämpi kuin 768 kuvapistettä.

Ymmärtääksemme miksi näin tapahtuu, meidän on tehtävä lyhyt historiatunti.

Kun alkuperäinen iPhone julkistettiin vuonna 2007, yksi sen suurimmista myyntikohteista oli kyky selata todellista verkkoa, vaikka se tarkoittaisi kiinteän leveyden työpöydälle suunnattuja sivustoja, jotka oli puristettava alas, jotta ne mahtuvat pienelle näytölle. IPhone pystyi tekemään tämän ilmoittamalla näytön olevan 980 kuvapistettä leveä, ennen kuin se pienensi verkkosivuja 320 pikselin leveälle näytölle.

Mutta iPhone esiteltiin ennen reagoivan suunnittelun tuloa. Nyt kun kirjoittajat suunnittelevat mobiililaitteille suunniteltuja sivustoja, tämä ominaisuus on vähemmän hyödyllinen. Onneksi Apple sisälsi keinon kiertää tämä käyttäytyminen, ja koska muut valmistajat ovat hyväksyneet sen, siitä on tullut melkein tosiasiallisesti vakiona. Se edellyttää yksinkertaisesti yhden lisäämistä meta elementti merkintäämme:

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

Tämä kertoo näkymäporttitietoisille selaimille, että verkkosivustoa ei pitäisi pienentää ja että selainikkunan leveyttä tulisi kohdella samalla tavalla kuin laitteen kokonaisleveyttä. Kun olemme lisänneet tämän rivin, verkkosivustomme ilmestyy suunnitellulla ulkoasulla:

04. Katkaisupisteiden valinta

Palataan mediakyselymme:

@media -näyttö ja (min-leveys: 768px) {
...
}

Arvoja, joissa asettelu mukautuu, kutsutaan yleisesti katkaisupisteiksi. Jos muistat, toisessa osassa sanoin, että pikselien käyttö on osoitus reagoimattomasta ajattelusta, mutta tässä olen valinnut 768 kuvapistettä, luultavasti siksi, että se on tutun laitteen leveys.

Sen sijaan, että valitsisit taukopisteet suosittujen laitteiden ominaisuuksien perusteella, voi olla tehokkaampaa tarkastella sisältöstämme johdettuja arvoja, kuten mukavat viivanpituudet lukemiseen tai kuvan enimmäiskoko.

Kun tyyppimme mitoitetaan emien avulla, näyttää järkevältä, että mediakyselymme käyttävät myös ems. Itse asiassa sillä on lisäetua. Kun käyttäjä muuttaa tekstin kokoa selaimessa, sivut mukautuvat käyttämään pienempiä katkaisupisteitä. Sivustomme ei sopeudu pelkästään näkymän koon, vaan myös fontin koon mukaan. Itse asiassa vasta kun näin Jeremy Keithin osoittavan em-pohjaisia ​​mediakyselyjä, tajusin, kuinka voimakkaita ne voisivat olla.

Vaikka suunnittelumme saattaa antaa jonkin verran viitteitä mahdollisista katkaisupisteistä, usein paras tapa valita ne on kokeilla. Säätämällä selainikkunan leveyttä olen päättänyt, että 800 kuvapistettä on hyvä leveys vaihtaessa monimutkaisempaan asetteluun.

Kuinka kuitenkin 800px ilmaistaan ​​ems-tiedostoissa? Jälleen voimme käyttää kaavaa, mutta mikä on asiayhteys? Kun lasketaan mediakyselyjen ems, konteksti on aina selaimen oletusfonttikoko riippumatta siitä, onko tämä arvo ohitettu CSS: ssäsi. Oletusarvo on yleensä 16 kuvapistettä, mikä antaa meille:

800 / 16 = 50

Voimme nyt päivittää mediakyselymme näin:

@media -näyttö ja (min-leveys: 50em) {/ * 800px * /
...
}

05. Pikkukuvien säätäminen

Muistat, että osassa 2 muotoilimme pikkukuvat reagoiviksi. Mutta kun näiden pikkukuvien kuvat ovat saavuttaneet täyden leveytensä, jokaisen kuvan oikealle puolelle ilmestyy valkoisen alueen alue. Jälleen mediahaun avulla voimme korjata tämän.

Tässä on alkuperäinen CSS:

ol.media li.media-item {
taustaväri: #fff;
marginaali: 0 4.16666666667% 4.16666666667% 0;
leveys: 47,91666666667%;
kellua: vasen;
}
ol.media li.media-item: nth-child (2n) {
reuna-oikea: 0;
}

Piste, jossa tämä välilyönti ilmestyy, on samalla, kun selain kasvaa leveämmäksi kuin 560 kuvapistettä.Valitsemme tämän arvon vaihtaaksemme näyttämään kolme pikkukuvaa riviä kohden. Voimme tehdä sen lisäämällä seuraavan CSS: n:

@media -näyttö ja (min-width: 35em) {
.media-item {
leveys: 30,612244897959%; / * 240/784 * /
marginaali: 0 4,081632653061% 1,1429em 0; / * 0 32/784 16px 0 * /
}
.media-item: nth-child (3n) {
reuna-oikea: 0;
}
}

Huomaa, että meidän ei tarvitse kirjoittaa kaikkia tämän mediakyselyn pikkukuvan edellyttämiä tyylejä, vain ne osat, jotka haluamme mukauttaa.

Tarkastellessasi tätä muutosta selaimessa huomaat, että jokaisen toisen pikkukuvan oikealla puolella ei ole marginaalia. Tämä johtuu siitä, että seuraava CSS-sääntö on edelleen aktiivinen:

ol.media li.media-item: nth-child (2n) {
reuna-oikea: 0;
}

Meidän on muutettava mediakyselymme CSS: ää nollataksesi arvon:

@media -näyttö ja (min-width: 35em) {
.media-item {
leveys: 30,612244897959%; / * 240/784 * /
marginaali: 0 4,081632653061% 1,1429em 0; / * 0 32/784 16px 0 * /
}
.media-item: nth-child (2n) {
marginaali-oikea: 4,081632653061%;
}
.media-item: nth-child (3n) {
reuna-oikea: 0;
}
}

Kun luot mediakyselyjä, ole aina tietoinen tällaisista perintöasioista.

06. Ei vain leveys

On tärkeää miettiä mediakyselyjä paitsi leveyden, myös muiden muuttujien suhteen. Esimerkiksi mediatiedostosivumme video on osittain piilotettu, kun näkymäikkunan korkeus pienenee. Meillä on tekniikka:

.media-object-wrapper {
pehmustepohja: 56,25%;
leveys: 100%;
korkeus: 0;
asema: suhteellinen;
}
@media -näyttö ja (max-height: 35em) ja (suunta: vaaka) {/ * 560px * /
.media-object-wrapper {
leveys: 60%;
pehmustepohja: 33,75%;
}
}

Olen jopa sisällyttänyt suuntauskyselyn hienosäätääksesi tätä käyttäytymistä edelleen.

Voimme noudattaa samanlaista lähestymistapaa suunnittelumme muissa osissa vaihtamalla otsikon suuremman version ja siirtämällä navigointilinkit sivun yläosaan, kun tilaa on käytettävissä.

• Katso herkkä kotisivumme
• Katso reagoiva mediatuotesivumme

Ja meillä on se! Olemme rakentaneet reagoivan verkkosivuston - ja meillä on päivä varaa! No, ei aivan. Joustavat asettelut, kuvat ja mediakyselyt ovat vasta alku reagoivalle suunnitteluprosessille.

Huomenna: Tämän opetusohjelman viimeisessä osassa siirrymme reagoivan verkkosuunnittelun ulkopuolelle ja tarkastelemme, kuinka voimme rakentaa todella reagoivia verkkosivustoja.

Paul on vuorovaikutussuunnittelija, joka työskentelee Brightonissa, Englannissa. Hän on onnellisin, kun hän rakentaa yksinkertaisia ​​mutta kiinnostavia käyttöliittymiä, jotka ovat kotoisin verkosta.