Sisältö
- Tarvittavaa tietoa: Keskitason CSS ja HTML
- Vaatii: Tekstieditori, moderni selain, grafiikkaohjelmisto
- Projektin aika: 1 tunti (yhteensä 5 tuntia) Lataa lähdetiedostot
Eilen kuvasin, kuinka voimme suunnitella nestemäisiä asetteluja, ja ehdotin, että tätä varten meidän on siirryttävä pois pikseleistä ja omaksuttava sen sijaan suhteelliset yksiköt, kuten ems ja prosenttiosuudet.
Tämä kaikki on hyvin, kun käsitellään tekstiosia; Jos sarake muuttuu liian kapeaksi, teksti voi helposti kiertyä uudelle riville. Mutta mediaominaisuudet, kuten kuvat ja video, ovat määrittäneet pikseleinä asetetut mitat. Voimme pienentää näitä tietysti, mutta se tarkoittaa suurempien tiedostojen lataamista kuin tarvitaan, ja kaistanleveys voi olla kallista.
Teräväpiirtoiset (tai verkkokalvon) näytöt asettavat toisen haasteen. Nämä näytöt pakkaavat huomattavan määrän pikseleitä pienelle alueelle, jolloin yksityiskohdat voidaan näyttää. Tämä voi olla ongelma suurikontrastisissa kuvissa ja ikonografioissa, jotka saattavat vaikuttaa epäselviltä ja puuttuvilta määriteltäviltä, ellei niitä ole suunniteltu vastaamaan näitä natiiviresoluutioita.
Tänään tarkastelen näitä asioita ja annan käsityksen siitä, miten voimme puuttua niihin. Mutta on syytä huomata, että tämä on nopeasti kehittyvä alue, jolla on uusia lähestymistapoja melkein päivittäin. Tämä voi olla haastavaa - mutta myös jännittävää!
Kuvien skaalaus sujuvasti
Eilen loimme sujuvan asettelun pikkukuvallemme. Valitettavasti kunkin kohteen kuvat eivät sopeutuneet muuttuvaan ulkoasuun, rikkoutuneet konttien ulkopuolelle tai jättäneet suuria alueita tyhjää tilaa:
Onneksi on helppo tapa korjata tämä. Ensin löysi Richard Rutter (nesteiden asettelujen varhainen edelläkävijä), ja siihen liittyy seuraavan säännön lisääminen kuviin, jotka haluat skaalata asettelulla:
- img
- enimmäisleveys: 100%;
- }
Tämä sääntö kertoo selaimille, että kuvan tulisi täyttää sen sisältävän elementin leveys siihen pisteeseen asti, jossa se saavuttaa 100% sen koosta. Yksinkertainen!
On kuitenkin yksi pieni huomautus. Jotta tämä CSS-ilmoitus toimisi, et voi lisätä korkeusattribuuttia kuviisi. Suorituskyvyn näkökulmasta se ei ole ihanteellinen (mitä nopeammin selain tietää, minkä kokoinen kuva on renderoitava, sitä vähemmän aikaa se viettää sivun piirtämiseen uudelleen). Lisää edelleen leveys- ja korkeusattribuutit kuville, joita ei kuitenkaan tarvitse skaalata.
Reagoivat kuvat
Huomaa, että näissä pikkukuvissa käytän kuvia, jotka heijastavat työpöydälle suunnatun asettelun suunnittelua, ja pienennän niitä kapeammille näkymille. Tämä näyttää olevan vastoin kaikkea mitä olemme aiemmin kuvanneet - tämä ei ole ensin mobiili!
Kuten kaikessa, kyse on tuomiosta. Meidän on tasapainotettava suorituskyky ylläpidettävyyteen - ja omaan järkevyyteen! Näiden pikkukuvien koon ero on riittävän pieni (138 kuvapistettä> 240 kuvapistettä), jotta voimme kompensoida tiedostokoon muilla tavoilla. Käytämme oikeaa tiedostomuotoa (JPEG voi tyypillisesti tuottaa valokuville pienimmän tiedostokoon) ja pakkaa sopivan määrän pakkausta. Käsittelemme kuvan optimointia tarkemmin tämän opetusohjelman viimeisen osan aikana.
Mediakohdesivulla valokuvan leveys voi kuitenkin olla välillä 288–800 pikseliä. Tiedostomuodosta ja muusta optimoinnista riippumatta suurin kuvamme voi silti olla missä tahansa enintään 300 kt: n kokoisessa latauksessa 3G-yhteyden kautta kestää useita sekunteja (ellei kauemmin). Tämä on ongelma.
Ihannetapauksessa selain ilmoittaa näytettävän kuvan koon ja käytettävissä olevan kaistanleveyden keskimääräisen määrän, ja voimme palvella sopivan kokoista kuvaa, joka parhaiten vastaa näitä rajoituksia. Valitettavasti mikään selain ei tee tätä, eikä mikään viittaa siihen, miten tämäkin voisi toimia (no, ei vielä muutenkin).
Tällainen on tämän ongelman valtavuus, muutama älykäs ja lahjakas kehittäjä on ehdottanut joitain ratkaisuja. Monet käyttävät JavaScriptiä, toiset käyttävät palvelinpuolen tunnistusta; kaikilla on etunsa ja kompromissinsa:
- Reagoivat kuvat: Scott Jehlin kehittämän lähestymistavan (palvelinpuolen uudelleenkirjoittamisen, evästeiden ja JavaScriptin yhdistelmä) tarkoituksena on havaita näkymän leveys ennen kuin kuvia ladataan. Jos näkymä on pieni, vaaditaan oletuksena pieni kuva. Silti, jos näkymä on riittävän suuri, pyynnöt kirjoitetaan uudelleen hakemistoon, joka sisältää suurempia kuvia, ja ne ladataan sen sijaan. Valitettavasti, kun selaimet keskittyvät yhä enemmän suorituskykyyn - tyypillisesti käyttämällä tekniikoita, joihin liittyy resurssien ennakkohaku -, tästä lähestymistavasta on tullut hauras. Se tunnistaa myös näytön leveyden päättääkseen ladattavat kuvat, mutta ei aina ole totta, että suurempi näyttö takaa isommat kuvat.
- Mukautuvat kuvat: Matt Wilcoxin kehittämä ja Scottin työn innoittama PHP-ratkaisu on lähestymistapa yhteensopiva olemassa olevien merkintöjen kanssa ja mahdollistaa useiden kuvakokojen käytön. Jälleen se lataa kuvia näytön tarkkuuden perusteella, mikä ei ole aina tarkka testi, ja vaatii PHP: n ja GD-kirjaston toimiakseen.
- Reagoiva parannus: Vaikka monet lähestymistavat ovat keskittyneet yrittämään selvittää, mikä kuva ladataan ennen sivun latautumista, Josh Emerson on käyttänyt erilaista lähestymistapaa. Muiden ratkaisujen tapaan siihen liittyy viittaus pienimpään kuvaan merkinnässä. Sen sijaan, että havaitaan, tarvitaanko suurempaa kuvaa ennen sivun lataamista, tässä pienin kuva ladataan riippumatta. Vasta kun tämä on ladattu (ja jos vaaditaan suurempi kuva), se korvataan korkeamman resoluution versiolla. Monin tavoin tämä on nykyaikainen otos matala ominaisuus, joka salaperäisesti katosi HTML: stä. Kuinka kaipaamme sen paluuta.
Jason Grisby on kirjoittanut lisää tästä ongelmasta ja käsittelee upeita yksityiskohtia joidenkin yllä olevien ratkaisujen eduista ja haitoista. Samaan aikaan Matt Marquis on ehdottanut uuden HTML-elementin tarvetta ja perustanut W3C: n yhteisöryhmän yksityiskohtien selvittämiseksi.
Pitkä ja lyhyt siitä? Tämä ei ole ratkaistu ongelma. Voimme vain päättää, mikä yllä mainituista vaihtoehdoista sopii parhaiten tarpeisiimme. Tässä opetusohjelmassa valitsemme reagoivan parannustekniikan.
Ensin meidän on linkitettävä JavaScript-tiedostoon pää>:
- pää>
- ...
- script src = "/ _ js / responsive-enhancement.js"> / script>
- otsikko> Las Vegasiin saapuminen / otsikko>
- / pää>
Sitten meidän img> elementti meidän on lisättävä uusi data-fullsrc attribuutti, joka viittaa suuremman kuvan lähteeseen:
- img id = "mediaobjekti" src = "http://farm8.staticflickr.com/7131/6998741089_0d87917944_n.webp" data-fullsrc = "http://farm8.staticflickr.com/7131/6998741089_0d87917944_c.webp" alt = "Auringonlasku Arizonan yli" />
Meidän on myös lisättävä seuraava JavaScript-rivi kuvan alle:
- skripti> responsiveEnhance (document.getElementById (’media-objekti’), 320); / script>
Tämä kertoo selaimelle, mikä kuva on korvattava ja millä näkymän leveydellä se korvataan. Kun JavaScript on poistettu käytöstä (tai ei käytettävissä), käyttäjät saavat pienimmän kuvan. Muussa tapauksessa, kun näkymä on suurempi kuin 320 kuvapistettä, suurempi kuva näytetään, kun pienin on ladattu.
Lopuksi meidän on ohitettava kuvien oletustyyli. Jotta tunnistus toimisi, tarvitsemme pienemmän kuvan, jotta se skaalautuu alkuperäistä kokoa suuremmaksi. Voimme tehdä tämän seuraavasti:
- img.media-object {
- marginaali: 0 auto;
- leveys: 100%;
- maksimileveys: 50em; / * 800px * /
- }
Jälleen, tämä ei ole täydellinen ratkaisu (varsinkin kun voimme viitata vain yhteen lisäkokoiseen kuvaan), mutta se on paljon parempi kuin suurempien kuvien tarjoaminen riippumatta.
Tarkkuudesta riippumattomat kuvat
Kuvia ei tietenkään ole vain merkinnöissä: voimme viitata niihin myös CSS: stä. Asiat ovat täällä hieman helpompia, koska mediakyselyt tarkoittavat, että voimme valita, mitkä kuvat näytetään eri asetteluissa.
Koska monet CSS: n taustakuvat ovat kuvakkeita, on nyt hyvä aika koskettaa korkean resoluution näyttöjä ja erityisesti kahta tapaa, joiden avulla voimme käyttää resoluutiosta riippumattomia kuvakkeita:
- SVG-kuvan spritit: Skaalautuva vektorigrafiikka (SVG) nauttii yhä uudemmasta pikselivapaasta verkosta erämaassa vietettyjen vuosien jälkeen. Hyvällä tuella useimmissa moderneissa selaimissa - mukaan lukien IE9 ja uudemmat - voimme käyttää tätä muotoa monin tavoin. Voimme viitata siihen img> -elementistä, voimme upottaa SVG-koodin suoraan merkintäämme ja voimme viitata siihen CSS: stä. David Bushell on dokumentoinut tekniikan, joka käyttää SVG-pohjaisia kuvan sprittejä, ja se on lukemisen arvoinen.
- Kuvakkeen fontit: Toinen tapa lisätä skaalattavia kuvakkeita on erityisesti suunnitelluilla web-kirjasimilla, jotka sisältävät kuvakkeita kirjainten ja numeroiden sijaan. Tämä tarkoittaa, että voimme tyylitellä kuvakkeita samalla tavalla kuin tekstille, ja nauttia myös vektoripohjaisesta ikonografiasta. Jon Hicks kirjoitti kuvakekirjasimista yksityiskohtaisemmin 24 tapaa.
Suhde ga ga
Okei, tarpeeksi kuvista - puhutaan videoista. Onneksi videoiden reagointi on vähemmän ongelmallista.Tällainen on niiden koko, lähestymistavat videoiden tarjoamiseen kaistanleveysystävällisellä tavalla ovat yleisempiä, olipa kyseessä suoratoisto tai monet erilaiset saatavilla olevat pakkauskoodekit. Ja tietysti, videoiden lataamisen pitäisi alkaa vasta, kun olet pelannut.
Mutta haluamme videoidemme mittakaavan asettelumme rajoissa. Jos käytämme natiivia HTML5-videota, voimme jälleen käyttää seuraavaa CSS: ää:
- video {
- enimmäisleveys: 100%;
- }
Upotetut objektit (iframe>, esine>, upota>) käyttäytyvät eri tavalla. Jos lisäät upotukseen seuraavan säännön:
- iframe.media-object {
- enimmäisleveys: 100%;
- }
video ei välttämättä yllä oikeaa suhdetta mittakaavassa tai se voi yksinkertaisesti kieltäytyä taivuttamasta ollenkaan:
Tämä johtuu siitä, että upotetut objektit eivät pysty ilmoittamaan sisältämänsä videon suhdetta. Tämän ongelman kiertämiseksi meidän on sijoitettava upotus astiaan, jonka suhde on oikea, ja asetettava upotus 100% leveäksi ja korkeaksi (lähestymistavan löysi ensin Thierry Koblentz.
Ensin meidän on lisättävä säiliö upotuksen ympärille:
- div>
- iframe src = "http://player.vimeo.com/video/40493662" />
- / div>
Sitten voimme muotoilla kääreen seuraavasti:
- .media-object-wrapper {
- pehmustepohja: 56,25%;
- leveys: 100%;
- korkeus: 0;
- asema: suhteellinen;
- }
Pehmustepohjan arvo antaa kääreelle sen suhteen. Koska upotetut videomme on tallennettu 16: 9-kuvasuhteella, niiden korkeus on 56,25% leveydestä (9/16 = 0,5625). Huomaat, että olemme antaneet tälle elementille myös suhteellisen sijainnin; tämä on, jotta voimme ehdottomasti sijoittaa suljetun iframe>ja pyydä sitä sivuuttamaan tämä pehmuste:
- .media-object-wrapper iframe.media-object {
- leveys: 100%;
- korkeus: 100%;
- sijainti: absoluuttinen;
- }
Ja siinä sinulla on se. Videomme upotukset vastaavat nyt asettelua yhtä kauniisti kuin kuvamme:
Silti, kun tutkimme mallisalkkumme sujuvuutta, voimme nopeasti nähdä, että vaikka se skaalautuu, on olemassa kohtia, joissa teemme ihanteellisesta asettelusta hieman älykkäämpiä, mukauttamalla sitä selaimen leveyden kasvaessa.
Huomenna: Tarkastelemme reagoivan verkkosuunnittelun viimeistä osaa: mediakyselyjä.
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.
